flutter

Full width Container in Flutter

If you are building an app for the first time and wondered how to set up a full-width Container with Flutter, then these code examples are for you.

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.

Full-width container using MediaQuery

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'),
    );
  }
}

Was this helpful?