Search code examples
flutterimagekotlindartrow

How to fit column/row table image content in flutter


I have this little project to fit a 9 images into column/row table with flutter the problem is that the images are presented out of the screen

I wanted it to be like this:

I wanted it to be like this

This is the code

 return MaterialApp(
          home: SafeArea(
            child: Scaffold(
                backgroundColor: Colors.tealAccent,
                body: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset('images/1.png', fit: BoxFit.fill),
                        Image.asset('images/2.png', fit: BoxFit.fill),
                        Image.asset('images/3.png', fit: BoxFit.fill),
                      ],
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset('images/4.png', fit: BoxFit.fill),
                        Image.asset('images/5.png', fit: BoxFit.fill),
                        Image.asset('images/6.png', fit: BoxFit.fill),
                      ],
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset('images/7.png', fit: BoxFit.fill),
                        Image.asset('images/8.png', fit: BoxFit.fill),
                        Image.asset('images/9.png', fit: BoxFit.fill),
                      ],
                    ),
                  ],
                )),
          ),
        );

This is the result:

this is the resulte


Solution

  • Try using Expanded widget-

    return MaterialApp(
              home: SafeArea(
                child: Scaffold(
                    backgroundColor: Colors.tealAccent,
                    body: Column(
                     mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Expanded(child:Image.asset('images/1.png',fit: BoxFit.fill), flex:1),
                            Expanded(child:Image.asset('images/2.png',fit: BoxFit.fill), flex:1),
                            Expanded(child:Image.asset('images/3.png',fit: BoxFit.fill), flex:1),
                          ],
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Expanded(child:Image.asset('images/4.png',fit: BoxFit.fill), flex:1),
                            Expanded(child:Image.asset('images/5.png',fit: BoxFit.fill), flex:1),
                            Expanded(child:Image.asset('images/6.png',fit: BoxFit.fill), flex:1),
                          ],
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Expanded(child:Image.asset('images/7.png',fit: BoxFit.fill), flex:1),
                            Expanded(child:Image.asset('images/8.png',fit: BoxFit.fill), flex:1),
                            Expanded(child:Image.asset('images/9.png',fit: BoxFit.fill), flex:1),
                          ],
                        ),
                      ],
                    )),
              ),
            );
    

    Let me know if it works...