How to arrange boxes in row in Flutter? - flutter

Question

This is my code to arrange boxes vertically.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
Widget box({width: 100.0, height: 100.0}) => Container(
width: width,
height: height,
color: Colors.grey,
);
#override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
box(),
box(),
box(),
],
),
);
}
}
Since I have a little experience for CSS flexbox, replacing the Column widget with the Row to arrange boxes in row But it can't work. Only black screen appeared. I've already make sure that the code works under the MaterialApp widget.
For learning purpose, I want to keep the code as simple as possible.
What do I need to make the above code work? What is a minimum requirement? Or is there an other widget appropriates for root in such example case?
Thank you for sparing time to read my question!

Answer 1

You need a material app render the colors and stuff
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Container(
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
box(),
box(),
box(),
],
),
);
);
}
}

Answer 2

MaterialApp widget must be a root widget
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: MyApp())); // <- magic
class MyApp extends StatelessWidget {
Widget box({width: 100.0, height: 100.0}) {
return Container(
width: width,
height: height,
color: Colors.grey,
);
}
#override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
box(),
box(),
box(),
],
),
);
}
}