简体   繁体   中英

how to insert a row inside a column in flutter

[not able to figure out the middle column]

https://i.stack.imgur.com/8kLD5.png

child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Container(
                  height: double.infinity,
                  width: 100,
                  color: Colors.red,
                ),
                Container(
                  height: 100,
                  width: 100,
                  color: Colors.white,
                ),
                Container(
                  height: double.infinity,
                  width: 100,
                  color: Colors.blue,
                ),
              ])

Just Put a Column in center with mainAxisAlignment: MainAxisAlignment.center

 Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
              Container(
                height: double.infinity,
                width: 100,
                color: Colors.red,
              ), Column(
                mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container( height: 100, width: 100, color: Colors.redAccent, ),
                Container( height: 100, width: 100, color: Colors.white, ),
              ],
            ), Container( height: double.infinity, width: 100, color: Colors.blue, ), ])

Hope this will help:

child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Container(
                  height: double.infinity,
                  width: 100,
                  color: Colors.red,
                ),
                Column(
                  children: <Widget>[
                    Container(
                    height: 100,
                    width: 100,
                    color: Colors.white,
                  ),
                  Container(
                    height: 100,
                    width: 100,
                    color: Colors.white,
                  ),
                  ]
                )
                Container(
                  height: double.infinity,
                  width: 100,
                  color: Colors.blue,
                ),
              ])

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM