Flutter layout (6 container in Columan )

Question

i want to make 6 container in Column and make the container clickable like in the image

    class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Cours et exercices pour S5 LST IETEL"),
      ),
      body: Container(
        height: 150.0,
        width: 150.0,
        margin: const EdgeInsets.all(20.0),
        padding: EdgeInsets.symmetric(horizontal: 17.8, vertical: 30.5),
        alignment: Alignment.bottomCenter,
        decoration: new BoxDecoration(
            // color: Colors.green,
            color: Hexcolor("#230A59"),
            borderRadius: new BorderRadius.only(
                topLeft: const Radius.circular(40.0),
                topRight: const Radius.circular(40.0))),
        child: Center(
          child: Text(
            "Electronique Analogique",
            style: TextStyle(
              color: Hexcolor("#f2f2f2"),
              fontWeight: FontWeight.bold,
              fontFamily: 'Montserrat',
              fontSize: 20,
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

You can use GridView.count and you can put your object in a class to have flexible code and you can define onTap property for clickable container like code below:

class Test1 extends StatelessWidget {
  List<MainObject> list = [
    MainObject(
      onTap: () {/*some actions*/},
    ),
    MainObject(),
    MainObject(),
    MainObject(),
    MainObject(),
    MainObject(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Cours et exercices pour S5 LST IETEL"),
        ),
        body: GridView.count(
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
          crossAxisCount: 2,
          physics: ScrollPhysics(),
          children: List.generate(list.length, (index) => list[index]),
        ));
  }
}

class MainObject extends StatelessWidget {
  final Function onTap;
  MainObject({this.onTap});
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        height: 150.0,
        width: 150.0,
        margin: const EdgeInsets.all(20.0),
        padding: EdgeInsets.symmetric(horizontal: 17.8, vertical: 30.5),
        alignment: Alignment.bottomCenter,
        decoration: new BoxDecoration(
// color: Colors.green,
            color: Color(0xff230A59),
            borderRadius: new BorderRadius.only(
                topLeft: const Radius.circular(40.0),
                topRight: const Radius.circular(40.0))),
        child: Center(
          child: Text(
            "Electronique Analogique",
            style: TextStyle(
              color: Color(0xfff2f2f2),
              fontWeight: FontWeight.bold,
              fontFamily: 'Montserrat',
              fontSize: 20,
            ),
          ),
        ),
      ),
    );
  }
}