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
hope this help 🙂