Containers and padding

Container widget

• One of simplest layout widgets that flutter offers.
• Wraps around other widgets

  class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Hello Shaun!"),
        centerTitle: true,
        backgroundColor: Colors.cyan[300],
      ),
      body: Container(
        color: Colors.grey[900], // background color
        child: Text("Heloo"), // Container restrict it self to child widget
  
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Text('click'),
        backgroundColor: Colors.blueGrey[800],
      ),
    );
  }
  }
  

  

• Container restrict it self to child widget
  

• Padding and margin
  • Padding is INSIDE Spacing
  • Margin is OUTSIDE Spacing
• If you want padding to a Container() widget or to margin it, use padding property inside Container() widget.

  class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Hello Shaun!"),
        centerTitle: true,
        backgroundColor: Colors.cyan[300],
      ),
      body: Container(
        // Padding is INSIDE Spacing
        //padding: EdgeInsets.all(20.0), // EdgeInsets control the spacing (padding and margin) inside Flutter
        //padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 10.0),
        padding: EdgeInsets.fromLTRB(10.0, 20.0, 30.0, 40.0),
        // Margin is OUTSIDE Spacing
        margin: EdgeInsets.all(30.0),
        color: Colors.grey[900], // background color
        child: Text("Heloo"), // Container restrict it self to child widget
  
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Text('click'),
        backgroundColor: Colors.blueGrey[800],
      ),
    );
  }
  }
  

  

• If you want padding a simple widget such as Text() widget, use Padding() widget.

  Padding() widget does not allow margin or color. It only takes padding itself.

  class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Hello Shaun!"),
        centerTitle: true,
        backgroundColor: Colors.cyan[300],
      ),
      body: Padding( 
        padding: EdgeInsets.all(90.0),
        child: Text("Heloo"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Text('click'),
        backgroundColor: Colors.blueGrey[800],
      ),
    );
  }
  }