Flutter Container Widget Examples – Full Screen, Border and Radius

Container is a widget that combines common painting, positioning, and sizing widgets. Flutter Container widget is used frequently in a Flutter app’s screen.

Container(
          padding: const EdgeInsets.all(16.0),
          color: Colors.blue,
          width: 100.0,
          height: 100.0,
          child: Text('100.0'),
        )

Make container fill the whole screen

Container(
          padding: const EdgeInsets.all(16.0),
          color: Colors.blue,
          width: double.infinity,
          height: double.infinity,
          child: Text('infinity'),
        )

Container(
          padding: const EdgeInsets.all(16.0),
          color: Colors.blue,
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: Text('media size'),
        )

Container with border and radius

Container(
          padding: const EdgeInsets.all(8.0),
          width: 200.0,
          height: 200.0,
          decoration: BoxDecoration(
              border: Border.all(color: Colors.blueAccent),
              borderRadius: BorderRadius.all(Radius.circular(6.0)),
          ),
          child: Text("Border"),
        )