CODEWITHSUNDEEP
flutterdartalignment
Hasen
Hasen

Reputation: 12336

Flutter align widget to centre and another to the right - impossible

I'm trying to do something which should be extremely simple but can't see how it is done.

I need to align the large text to the centre and the buttons to the right so it looks like image below:

enter image description here

With the code below the widgets are aligned left and right:

    Container(
      width: 300,
      height: 200,
      decoration: BoxDecoration(
        border: Border.all(color: Colour.darkBlue, width: 2),
        borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Centred', style: TextStyle(fontSize: 32)),
              Text('24.6 %', style: TextStyle(fontSize: 48)),
            ],
          ),
          Container(
            margin: EdgeInsets.only(left: 10),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('BtnA', style: TextStyle(fontSize: 18)),
                Text('BtnB', style: TextStyle(fontSize: 18)),
                Text('BtnC', style: TextStyle(fontSize: 18)),
              ],
            ),
          ),
        ],
      ),
    ),

I tried the following method:

    Container(
      width: 300,
      height: 200,
      decoration: BoxDecoration(
        border: Border.all(color: Colour.darkBlue, width: 2),
        borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Expanded(child: Container()),
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('Centred', style: TextStyle(fontSize: 32)),
                Text('24.6 %', style: TextStyle(fontSize: 48)),
              ],
            ),
          ),
          Expanded(
            child: Container(
              margin: EdgeInsets.only(left: 10),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('BtnA', style: TextStyle(fontSize: 18)),
                  Text('BtnB', style: TextStyle(fontSize: 18)),
                  Text('BtnC', style: TextStyle(fontSize: 18)),
                ],
              ),
            ),
          ),
        ],
      ),
    ),

But it resulted in this:

enter image description here

Not sure how or whether it can be done without manually setting a width for the container on the left which is clearly a far from ideal method. Flutter seems to desperately need float:right...

Upvotes: 4

Views: 1728

Answers (3)

Illia Vlasov
Illia Vlasov

Reputation: 251

You was almost there. Just "Expanded" in the middle should be removed:

    Container(
      width: 300,
      height: 200,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.blueAccent, width: 2),
        borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Expanded(child: Container()),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Centred', style: TextStyle(fontSize: 32)),
              Text('24.6 %', style: TextStyle(fontSize: 48)),
            ],
          ),
          Expanded(
            child: Container(
              margin: EdgeInsets.only(left: 10),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('BtnA', style: TextStyle(fontSize: 18)),
                  Text('BtnB', style: TextStyle(fontSize: 18)),
                  Text('BtnC', style: TextStyle(fontSize: 18)),
                ],
              ),
            ),
          ),
        ],
      ),
    ),

enter image description here

Upvotes: 1

Amit Prajapati
Amit Prajapati

Reputation: 14335

    child: Center(
          child: Container(
            width: 300,
            height: 150,
            decoration: BoxDecoration(
              border: Border.all(color: Colors.red, width: 2),
              borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
            ),
            child: Container(
              child: Stack(
                children: <Widget>[
                  Center(
                    child: Container(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Flexible(
                            child: Text('Centred',
                                style: TextStyle(fontSize: 32)),
                          ),
                          Flexible(
                            child: Text('24.6 %',
                                style: TextStyle(fontSize: 48)),
                          ),
                        ],
                      ),
                    ),
                  ),
                  Align(
                    alignment: Alignment.centerRight,
                    child: Container(
                      margin: const EdgeInsets.only(right: 16.0),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                          Text('BtnA', style: TextStyle(fontSize: 15)),
                          Text('BtnB', style: TextStyle(fontSize: 15)),
                          Text('BtnC', style: TextStyle(fontSize: 15)),
                        ],
                      ),
                    ),
                  )
                ],
              ),
            ),
          ),
        ),

enter image description here

Upvotes: 0

Kailash Chouhan
Kailash Chouhan

Reputation: 2386

Try with ListTile Widget, I have made changes using ListTile, please check if it works for you

enter image description here

 Center(
    child: Container(
      alignment: Alignment.center,
      margin: EdgeInsets.only(top: 10),
      padding: EdgeInsets.all(15),
      width: 300,
      height: 150,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.blue, width: 2),
        borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
      ),
      child: ListTile(
        title: Text('Centred',
            textAlign: TextAlign.center, style: TextStyle(fontSize: 30)),
        subtitle: Text('24.6 %',
            textAlign: TextAlign.center, style: TextStyle(fontSize: 48)),
        trailing: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('BtnA', style: TextStyle(fontSize: 15)),
            Text('BtnB', style: TextStyle(fontSize: 15)),
            Text('BtnC', style: TextStyle(fontSize: 15)),
          ],
        ),
      ),
    ),
  )

Upvotes: 0

Related Questions