Is it possible to add another row underneath a row with 3 column children-CodePudding

I'm making a UI for an app and it requires having 4 icons on the left and right side of the screen going down and 1 image in the middle the height of all icons. Using row a row widget and 3 columns its been set up but the issue I'm having is adding one more image below the 3 columns that will stretch across the screen.

Is there a way to add another row underneath the 3 columns to display the last image?

Code looks like this currently

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.orange,
      appBar: AppBar((...),
      ),
      body:
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            //Left Column
            Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                IconButton(...),
                IconButton(...),
                IconButton(...),
                IconButton(...),
              ],
            ),
            //Centre Column
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Expanded(
                    child: SizedBox(
                      child: Image(...),
                ),
                    )
                )
              ],
            ),
            //Right Column
            Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                IconButton(...),
                IconButton(...),
                IconButton(...),
                IconButton(...),
              ],
            ),
          ],
        )
    );
  }
}


  [1]: https://i.stack.imgur.com/w9NlN.png

CodePudding user response：

Row being the body of Scaffold has parent height equal to whole screen. So the Image widget also tries to get maximum possible height from parent. To remove this take the reference from bellow code:: add Column as the parent of the top level Row

  final url = "https://images.ctfassets.net/23aumh6u8s0i/4TsG2mTRrLFhlQ9G1m19sC/4c9f98d56165a0bdd71cbe7b9c2e2484/flutter";
  @override
Widget build(BuildContext context) {
return MaterialApp(
  theme: ThemeData.dark().copyWith(
    scaffoldBackgroundColor: darkBlue,
  ),
  debugShowCheckedModeBanner: false,
  home: Scaffold(
    body:
    Column(
      children: [
        SizedBox(
          height: 350,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              //Left Column
              Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  IconButton(onPressed:(){},icon: Icon(Icons.message_outlined)),
                  IconButton(onPressed:(){},icon: Icon(Icons.message_outlined)),
                  IconButton(onPressed:(){},icon: Icon(Icons.message_outlined)),
                  IconButton(onPressed:(){},icon: Icon(Icons.message_outlined)),
                ],
              ),
              //Centre Column
              Image.network(url),
              //Right Column
              Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  IconButton(onPressed:(){},icon: Icon(Icons.message_outlined)),
                  IconButton(onPressed:(){},icon: Icon(Icons.message_outlined)),
                  IconButton(onPressed:(){},icon: Icon(Icons.message_outlined)),
                  IconButton(onPressed:(){},icon: Icon(Icons.message_outlined)),
                ],
              ),
            ],
          ),
        ),
      ],
    ),
  ),
);
}