How to make Container match parent in Sizebox

March 22, 2023

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
      ),
      home: Scaffold(
          body: Align(
        alignment: Alignment.topCenter,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(
              height: 200,
            ),
            Container(
              width: 250,
              color: Colors.blue,
              child: Row(
                children: [
                  const Text('456789', style: TextStyle(color: Colors.white, fontSize: 15)),
                  SizedBox(
                    child: Container(
                      height: 10,
                      width: 100,
                      color: Colors.black,
                      // child: const Text('hello',style: TextStyle(color: Colors.white, fontSize: 10)),
                    ),
                  )
                ],
              ),
            )
          ],
        ),
      )),
    );
  }
}

I want to make black view match parent but I don’t know how to make it match_parent

If I Set ‘width: double.infinity’, all views will disappear.

I have tried many solution in stackoverflow but not working

please help, thanks!

>Solution :

You can wrap your sizebox using expanded and remove the width you got at the sizebox. and expanded will take all the leftover size in the column,

here is the edited code

 Container(
              width: 250,
              color: Colors.blue,
              child: Row(
                children: [
                  const Text('456789',
                      style: TextStyle(color: Colors.white, fontSize: 15)),
                  Expanded(
                    child: Container(
                      height: 10,
                      color: Colors.black,
                      // child: const Text('hello',style: TextStyle(color: Colors.white, fontSize: 10)),
                    ),
                  )
                ],
              ),
            )

and this is the result I get