CODEWITHSUNDEEP
flutterflutter-layout
feca
feca

Reputation: 31

flutter - row with elements of unequal weight

I have a row that spans the width of the screen and with three buttons and a text that are equally spaced(flex = 1). I want the text to be aligned to the center of the screen and the buttons at the ends. is this possible?

enter image description here

Upvotes: 2

Views: 2064

Answers (3)

Ravinder Kumar
Ravinder Kumar

Reputation: 8010

To cause a child to expand to fill the available space in the direction of this widget's main axis, wrap the child in an Expanded widget.

So you can try Expanded and declare Flex in second Expanded widget.

Solution

          Row(
            children: <Widget>[
              Expanded(child: Container(padding: EdgeInsets.all(16),color: Colors.red,child: Text("text 1"))),
              Expanded(flex: 3,child: Container(padding: EdgeInsets.all(16),color: Colors.blue,child: Text("text 2"))),
              Expanded(child: Container(padding: EdgeInsets.all(16),color: Colors.yellow,child: Text("text 3"))),
              Expanded(child: Container(padding: EdgeInsets.all(16),color: Colors.green,child: Text("text 4"))),
            ],
          ),

Output:

enter image description here

Upvotes: 4

Michal Olechowski
Michal Olechowski

Reputation: 646

Hey check the code bellow I think it does what you want:

button image


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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter buttons demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

  List<int> values = [1, 2, 3];

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Buttons demo'),
          centerTitle: true,
        ),
        body: Row(
          children: <Widget>[
            Flexible(
              child: Container(
                color: Colors.redAccent,
                child: FlatButton(
                  onPressed: () => {},
                  child: Text('Button'),
                ),
              ),
            ),
            Expanded(
                flex: 2,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    'Some text',
                    textAlign: TextAlign.right,
                  ),
                )),
            Flexible(
              child: Container(
                color: Colors.green,
                child: FlatButton(
                  onPressed: () => {},
                  child: Text('Button'),
                ),
              ),
            ),
            Flexible(
              child: Container(
                color: Colors.purple,
                child: FlatButton(
                  onPressed: () => {},
                  child: Text('Button'),
                ),
              ),
            ),
          ],
        ));
  }
}

Upvotes: 1

Oprimus
Oprimus

Reputation: 1898

There are a few ways. The simplest I can think of is using a SizedBox widget.

In your example, you can use the SizedBox widget and add one additional box with the same dimensions as your left button on the left. The SizedBox will occupy the space but won't be rendered on screen.

Upvotes: 0

Related Questions