CODEWITHSUNDEEP
flutterflutter-layout
beauchette
beauchette

Reputation: 1126

Flutter: cutting a row in "half"

I've been toying with lists in flutter, and everything is fine. I'm starting to understand the logic of the whole thing.

Now I wanted to do a simple layout like that : layout example

My problem is that I can't find a way to make the first row. I tried to tell Row to let its two children take half and no less no more, but I didn't really find a way. (The inside thing will eventually be buttons.)I tried several things to no avail. Here is the layout I started from :

Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: Column(children: <Widget>[
        Padding(
          padding: EdgeInsets.only(top: 50.0),
        ),
        Row(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(
                  top: buttonPaddingTop,
                  left: buttonPaddingSide,
                  right: buttonPaddingSide),
              child: ButtonTheme(
                child: FlatButton(
                  onPressed: () {},
                  color: Colors.grey,
                  child: const Text('LARGE TEXT',
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(fontSize: buttonFontSize)),
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.only(
                  top: buttonPaddingTop,
                  left: buttonPaddingSide,
                  right: buttonPaddingSide),
              child: ButtonTheme(
                child: FlatButton(
                  onPressed: () {},
                  color: Colors.grey,
                  child: const Text('LARGE TEXT',
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(fontSize: buttonFontSize)),
                ),
              ),
            ),
          ],
        ),
      ]),
    ),
  );
}

Should I continue trying like this, or should I try another object than Row to arrange the layout ?

Upvotes: 9

Views: 5102

Answers (1)

Loolooii
Loolooii

Reputation: 9170

Expanded takes as much space as available in this case horizontally. That means if you would use 2 Expanded widgets inside your Row, the space will be divided by half.

Try this:

Column(
    children: <Widget>[
      Row(
        children: <Widget>[
          Expanded(
            child: Text('first half'),
          ),
          Expanded(
            child: Text('second half'),
          ),
        ],
      ),
      Row(
        children: <Widget>[
          Expanded(
            child: Text('first half'),
          ),
          Expanded(
            child: Text('second half'),
          ),
        ],
      ),
      Row(
        children: <Widget>[
          Expanded(
            child: Text('full width'),
          )
        ],
      ),
    ],
  )

Make sure you read more about Flutter widgets, for example watch this video (and other ones in this series): https://www.youtube.com/watch?v=_rnZaagadyo

Upvotes: 22

Related Questions