Container(
color: const Color(0xffCCCCCC),
width: double.infinity, // Code to assign full width
child: const Text('Hello World'),
)
here, we are using double.infinity assigned as a value to the width property of the Container widget. This will make our container spread through full-screen horizontally.
You can also use MediaQuery to assign 100% width to a Flutter Container widget. We can calculate the full width of the device using MediaQuery.
MediaQuery.of(context).size.width
A simple Flutter example to make a Container occupy the full width.
class MainPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
double screenWidth = MediaQuery.of(context).size.width;
return Container(
color: const Color(0xffCCCCCC),
width: screenWidth,
child: const Text('Hello World'),
);
}
}
0 Comments