Flutter Create Full Width Container

Container widget always works with Width and height factor. If we do not define its width it automatically occupy its parent width and height by default. But this is not the right approach. To define width matched to its parent we have to define width value as double.infinity .

Flutter Create Full Width Container

1. Define width value double.infinity to make the container full width respect of root widget.

Container(
        width: double.infinity,
        height: 300,
        color: Colors.teal,
        alignment: Alignment.center,
        child: const Text(
          'Container with Full Width',
          style: TextStyle(fontSize: 28, color: Colors.white),
        ),
      ),

Screenshot:

Source code for main.dart file:

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  const App({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
      child: Container(
        width: double.infinity,
        height: 300,
        color: Colors.teal,
        alignment: Alignment.center,
        child: const Text(
          'Container with Full Width',
          style: TextStyle(fontSize: 28, color: Colors.white),
        ),
      ),
    )));
  }
}