Search code examples
flutterflutter-layout

Is there a way to align a widget to the far right of a row in Flutter?


I have a row in Flutter with two widgets. I'm trying to keep the first widget centered in the middle of the screen and the second widget forced to the far right of the screen.

I've tried using Spacer(). This results in the app returning a blank screen.

I've also tried using Expanded. This sends the second widget off the screen completely.

Trying mainAxisAlignment: MainAxisAlignment.spaceBetween did not seem to have any effect.

@override
  Widget build(BuildContext context) {
    return new Container(
      height: MediaQuery.of(context).size.height,
      child: SingleChildScrollView(
        child: new Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            new Container(
              child: new GestureDetector(
                onTap: () {
                  FocusScope.of(context).requestFocus(new FocusNode());
                },
                child: Column(
                  children: <Widget>[
                    SizedBox(height: 40.0),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        new Column(
                          children: <Widget>[
                            new Container(
                              child: Row(
                                mainAxisAlignment:MainAxisAlignment.spaceBetween,
                                children: <Widget>[
                                  Container(),
                                  Container(
                                    child: Text(
                                      'Profile',
                                      textAlign: TextAlign.center,
                                      style: TextStyle(
                                        fontFamily: 'Lato',
                                        color: Colors.white,
                                        fontSize: 50.0,
                                        fontWeight: FontWeight.w700,
                                      ),
                                    ),
                                  ),
                                  Container(
                                    child: IconButton(
                                      icon: Icon(
                                        Icons.settings,
                                        color: Colors.white,
                                        size: 30.0,
                                      ),
                                      onPressed: () {
                                        Navigator.push(
                                          context,
                                          MaterialPageRoute(
                                            builder: (context) => OnBoarding()),
                                        );
                                      }),
                                  ),
                                ]),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),

Solution

  • You can use a Row with an Expanded child that contains a Stack. Centre your text with Center and position the icon with Positioned, like so:

    [...]
    child: Column(
      children: <Widget>[
        SizedBox(height: 40.0),
        Row(
          children: <Widget>[
            Expanded(
              child: Stack(
                children: [
                  Center(
                    child: Text(...),
                    ),
                  ),
                  Positioned(
                    right: 8,
                    child: IconButton(...),
    [...]