Padding issue with parent Container Widget?

Question

How can i match parent widget size?

I want to have list features in Grid builder, Same time Grid's child widget size should match with parent widget. Grid should not scroll, so implemented 3*3 matrix formula and works but size not matching based on parent.

Code :

import 'package:flutter/material.dart';
import '../../../constants.dart';
import '../../../size_config.dart';
import 'dart:math';


class HomeScreen extends StatelessWidget {
  static String routeName = "/HomeScreen";

  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // You have to call it on your starting screen
    SizeConfig().init(context);
    AppBar appBar = AppBar(
      shadowColor: Colors.white70,
      elevation: 10,
      title: const Text(
        'WELCOMe',
        style: TextStyle(
          color: kPrimaryColor,
          fontWeight: FontWeight.bold,
        ),
      ),
      backgroundColor: Colors.white,
      leading: Container(),
    );
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: appBar,
      body: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  static const List<List<String>> featuresValues = [
    [
      "WELCOMe",
      "WELCOMe",
      "WELCOMe",
    ],
    [
      "WELCOMe",
      "WELCOMe",
      "WELCOMe",
    ],
    [
      "WELCOMe",
      "WELCOMe",
      "WELCOMe"
    ]
  ];
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return SafeArea(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Expanded(
            flex: 1,
            child: Container(
              color: HexToColor('#FFFFFF'),
              // decoration:  BoxDecoration(
              //   color: Colors.white,
              //   boxShadow: [
              //     BoxShadow(
              //       color: Colors.grey.withOpacity(0.5),
              //       blurRadius: 15,
              //       offset: Offset(15, 0), // changes position of shadow
              //     ),
              //   ], // Make rounded corner of border
              // ),
              width: SizeConfig.screenWidth,
              // color: Colors.white38,
              child: Row(
                children: [
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: CircleAvatar(
                      radius: 20,
                      child: ClipOval(
                        child: Image.asset(
                          "assets/images/Profile Image.png",
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          "KARTHIKEYAN",
                          textAlign: TextAlign.start,
                          style: TextStyle(
                            fontSize: getProportionateScreenWidth(10),
                            fontWeight: FontWeight.normal,
                            color: Colors.black,
                          ),
                        ),
                        Text(
                          "Executive",
                          textAlign: TextAlign.start,
                          style: TextStyle(
                              fontSize: getProportionateScreenWidth(10),
                              fontWeight: FontWeight.normal,
                              color: Colors.black),
                        ),
                      ],
                    ),
                  )
                ],
              ),
            ),
          ),
          Expanded(
            flex: 8,
            child: Container(
              width: SizeConfig.screenWidth,
              color: Colors.black12,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Expanded(
                    flex: 6,
                    child: Padding(
                      padding: const EdgeInsets.all(20.0),
                      child: Container(
                        child: Padding(
                          padding: const EdgeInsets.all(10.0),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: <Widget>[
                              for (int i = 0; i < 3; i++) ...[
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                  children: [
                                    for (int j = 0; j < 3; j++) ...[
                                      Column(
                                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                        children: [
                                          Container(
                                            child: Row(
                                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                              children: [
                                                Column(
                                                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                                  children: [
                                                    CircleAvatar(
                                                      radius: 20,
                                                      child: ClipOval(
                                                        child: Image.asset(
                                                          "assets/images/Profile Image.png",
                                                          fit: BoxFit.cover,
                                                        ),
                                                      ),
                                                    ),
                                                    Text(featuresValues[i][j]),
                                                  ],
                                                ),
                                              ],
                                            ),
                                            // margin: const EdgeInsets.all(5.0),
                                            // padding: const EdgeInsets.all(5.0),
                                            decoration: BoxDecoration(
                                              color : Colors.orange,
                                              border: Border.all(
                                                // color: Colors.grey,
                                              ),
                                            ),
                                          ),
                                        ],
                                      ),
                                    ]
                                  ],
                                ),
                              ]
                            ],
                          ),
                        ),
                        decoration: const BoxDecoration(boxShadow: [
                          BoxShadow(
                              color: Colors.black26,
                              blurRadius: 15.0,
                              offset: Offset(0.0, 0.5))
                        ], color: Colors.white),
                      ),
                    ),
                  ),
                  Expanded(
                    flex: 4,
                    child: Padding(
                      padding: const EdgeInsets.all(20.0),
                      child: Container(
                        color: Colors.orange,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
          // const Spacer(),
          Expanded(
            flex: 1,
            child: Container(
              decoration: BoxDecoration(
                color: Colors.white,
                // boxShadow: kElevationToShadow[-5],
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey.withOpacity(0.5),
                    blurRadius: 10,
                    offset: Offset(-1, -8), // changes position of shadow
                  ),
                ], // Make rounded corner of border
              ),
              width: SizeConfig.screenWidth,
              // color: Colors.white,
            ),
          ),
        ],
      ),
    );
  }
}

class HexToColor extends Color {
  static _hexToColor(String code) {
    return int.parse(code.substring(1, 7), radix: 16) + 0xFF000000;
  }

  HexToColor(final String code) : super(_hexToColor(code));
}

Sample Design:

Result:

Answer 1

I ended up with following solution, @Yeasin Sheikh thank you much..

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter Demo',
        home:  LoopWidget()
    );
  }
}
class LoopWidget extends StatelessWidget {

  static const List<List<String>> featuresValues = [
    [
      "",
      "",
      "",
    ],
    [
      "",
      "",
      "",
    ],
    [
      "",
      "",
      ""
    ]
  ];
   @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) => Column(
          children: [
            Padding(
              /// outside padding
              padding: const EdgeInsets.all(8.0),
              child: Column(
                 mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                 children: <Widget>[
                  
                    for (int i = 0; i < featuresValues.length; i++) ...[
                         Row(
                           children: [
                              for (int j = 0; j < featuresValues[i].length; j++) ...[
                                    Column(
                                      children: [
                                           Container(
                                             height : constraints.maxHeight / 3 - 8,
                                             width : constraints.maxWidth / 3 - 8,
                                             color: Colors.green,
                                           ),
                                       
                                        ],
                                   )
                               ],
                            ],
                        ),
                      ],
                  ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 2

You can LayoutBuilder to get parent size and use three 3* column<Row<3>>. I am using GridView.count with NeverScrollableScrollPhysics for your case. You can follow bellow widget.

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) => SingleChildScrollView(
          child: Column(
            children: [
              Padding(
                /// outside padding
                padding: const EdgeInsets.all(8.0),

                child: SizedBox(
                  /// perItem height * 3  = screen width
                  height: constraints.maxWidth,
                  child: GridView.count(
                    // if you need spacing
                    crossAxisSpacing: 4,
                    mainAxisSpacing: 4,
                    crossAxisCount: 3,
                    physics: const NeverScrollableScrollPhysics(),
                    children: List.generate(
                      9,
                      (index) => Container(
                        color: Colors.amber,
                        child: Text(
                          index.toString(),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }