how to mix between columns and rows in flutter - flutter

Question

I want to two add two containers next to each other in a row with two icon buttons on the bottom of the app like shown in the picture. i tried to use sizedbox but it wasn't enough.
i started the code with this but couldn't continue:
class Restaurent extends StatefulWidget {
const Restaurent({Key? key, required this.title}) : super(key: key);
final String title;
#override
_Restaurent createState() => _Restaurent();
}
class _Restaurent extends State<Restaurent> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Restaurant") ,
),
body: Container(
child: SafeArea(
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(Icons.youtube_searched_for),
]
),
),
),
);
}
}

Answer 1

You can create a Row() with setting mainAxisAlignment: MainAxisAlignment.end.
Here's an example, you can adjust it to fit what you want:
Scaffold(
body: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
height: 100,
width: 100,
decoration: BoxDecoration(
// color: Colors.black,
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.black)),
child: Text("hi"),
),
SizedBox(
width: 10,
),
Container(
height: 100,
width: 100,
decoration: BoxDecoration(
// color: Colors.black,
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.black)),
child: Text("hi"),
),
],
),
SizedBox(
height: 50,
),
Divider(
thickness: 5,
color: Colors.black,
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
height: 100,
width: 100,
decoration: BoxDecoration(
// color: Colors.black,
borderRadius: BorderRadius.circular(25),
border: Border.all(color: Colors.black)),
child: Text("hi"),
),
SizedBox(
width: 10,
),
Container(
height: 100,
width: 100,
decoration: BoxDecoration(
// color: Colors.black,
borderRadius: BorderRadius.circular(25),
border: Border.all(color: Colors.black)),
child: Text("hi"),
),
],
),
],
),
);
Result: