How to align widget to another widget in Flutter?

Question

I have a RaisedButton widget inside of a Center widget as one of the widgets in a Column of widgets. I want to add a CircularProgressIndicator to the right side of this button and show it when the button is pressed. Yet I want to leave the button centred when the progress bar is shown. In other words I want the button always be in the center and the progress bar aligned to this button.

I tried to use a Row here but this pushes the button and it becomes not centred any more.

EDIT1: Looking at the result of the solution provided by @Anil Chauhan (thanks for the answer):

Like I said before that I tried to use Row like he did, the problem is that in this case the button is not in the centred in the screen and is pushed by the progress bar. And I need it to stay in the middle of it's row.

EDIT2: @Anil Chauhan edited answer now works for a specific case in which the button is predetermined size. But if the size of the button is changed based on the language of the text (in apps that have several languages) this solution will not work.

This is the reason the question I asked is: "How to align widget to another widget". Because if I could that I don't have to worry about the button text size any more.

What would be the right way to handle this in Flutter?

Answer 1

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  bool _showIndicator = false;

  void _onButtonClicked() {
    setState(() {
      _showIndicator = !_showIndicator;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          children: <Widget>[
            const Expanded(child: SizedBox()),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 10.0),
              child: RaisedButton(
                child: Text("I am Too Big"),
                onPressed: _onButtonClicked,
              ),
            ),
            Expanded(
              child: _showIndicator
                  ? const Align(
                      alignment: Alignment.centerLeft,
                      child: CircularProgressIndicator(),
                    )
                  : const SizedBox(),
            ),
          ],
        ),
      ),
    );
  }
}

Here is my explanation:

• The RaisedButton size is depends on its child. If you add it to Row it will automatically align to left(or start).
• Expanded widget will fill the remaining space in Flex widget(Row & Column are child classes of Flex). If you add more than one Expanded widgets, it will split equally. So I added two Expanded to both the side of button to make it center.
• Now We should give child for Expanded Widget.
  • For the first one(left) we don't have anything to display so I added SizedBox.
  • For the second one(right) we need CircularProgressIndicator. so I added it.
• The Expanded widget will try to make its child to fill the space inside of it. So the CircularProgressIndicator will become Ellipse shaped. We can avoid this by using Align Widget.

Answer 2

Try this:

Updated: 


import 'package:flutter/material.dart';

void main() => runApp(MyApp());


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyAppOne(),
    );
  }
}
class MyAppOne extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyAppOne>{

  bool show = false;
  @override
  Widget build(BuildContext context){
    return Scaffold(
      body:  Stack(
          alignment: Alignment.center,
          children: <Widget>[
            Container(
              alignment: Alignment.center,
              child: RaisedButton(
                onPressed: () {
                  setState(() {
                    show =!show;
                  });
                },
                child: Text('Show'),
              ),
            ),
           Positioned(
             right: MediaQuery.of(context).size.width * .20,
             child:  Container(
              alignment: Alignment.center,
              padding: EdgeInsets.all(10.0),
              child: show ? CircularProgressIndicator() : Container(),
            ),
           )
          ],
        )
      );
  }
}

Answer 3

Flutter's Column and Row widgets have two convenient properties called mainAxisAlignment and crossAxisAlignment. I assume since you're using a Column and want the CircularProgressIndicator to the right of the button, you might be want to use crossAxisAlignment since the cross-axis of a Column is along the horizontal.

If possible, please share your code for better understanding and support of the issue.