15 Powerful Widgets You Can Use in Flutter’s Scaffold Body

15 Powerful Widgets You Can Use in Flutter’s Scaffold Body

In Flutter, the body property of the Scaffold widget accepts a variety of child widgets. These widgets allow you to build beautiful and flexible layouts. Here’s a list of the most common and powerful widgets you can use:

1. Container

Used for layout, padding, styling, etc.

body: Container(
  color: Colors.blue,
  height: 200,
  width: 200,
),
  

2. Column

Arranges children vertically.

body: Column(
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
),
  

3. Row

Arranges children horizontally.

body: Row(
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
),
  

4. Center

Centers its child within itself.

body: Center(
  child: Text('Centered Text'),
),
  

5. ListView

A scrollable list of widgets.

body: ListView(
  children: [
    ListTile(title: Text('Item 1')),
    ListTile(title: Text('Item 2')),
    ListTile(title: Text('Item 3')),
  ],
),
  

6. Stack

Overlays widgets on top of each other.

body: Stack(
  children: [
    Container(color: Colors.red, height: 200, width: 200),
    Positioned(
      top: 50,
      left: 50,
      child: Container(color: Colors.green, height: 100, width: 100),
    ),
  ],
),
  

7. Align

Positions a widget relative to its parent.

body: Align(
  alignment: Alignment.bottomRight,
  child: Text('Aligned Bottom Right'),
),
  

8. SingleChildScrollView

Enables scrolling when content overflows.

body: SingleChildScrollView(
  child: Column(
    children: [
      Container(height: 300, color: Colors.red),
      Container(height: 300, color: Colors.green),
      Container(height: 300, color: Colors.blue),
    ],
  ),
),
  

9. GridView

Displays widgets in a 2D grid format.

body: GridView.count(
  crossAxisCount: 2,
  children: [
    Container(color: Colors.red),
    Container(color: Colors.green),
    Container(color: Colors.blue),
    Container(color: Colors.yellow),
  ],
),
  

10. Expanded/Flexible

Fills available space in Column/Row.

body: Column(
  children: [
    Expanded(
      child: Container(color: Colors.red),
    ),
    Container(
      height: 100,
      color: Colors.blue,
    ),
  ],
),
  

11. SizedBox

Creates fixed-size or spacing between widgets.

body: SizedBox(
  height: 200,
  width: 200,
  child: Container(color: Colors.purple),
),
  

12. Form

Used for collecting user input.

body: Form(
  child: Column(
    children: [
      TextFormField(decoration: InputDecoration(labelText: 'Enter Name')),
      ElevatedButton(onPressed: () {}, child: Text('Submit')),
    ],
  ),
),
  

13. FutureBuilder

Builds widgets based on async operations.

body: FutureBuilder(
  future: Future.delayed(Duration(seconds: 2), () => 'Hello'),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return Center(child: CircularProgressIndicator());
    } else {
      return Center(child: Text(snapshot.data ?? ''));
    }
  },
),
  

14. CustomScrollView

Advanced scroll view using slivers.

body: CustomScrollView(
  slivers: [
    SliverAppBar(
      expandedHeight: 200,
      flexibleSpace: FlexibleSpaceBar(title: Text('AppBar')),
    ),
    SliverList(
      delegate: SliverChildListDelegate(
        [
          Container(color: Colors.red, height: 100),
          Container(color: Colors.green, height: 100),
          Container(color: Colors.blue, height: 100),
        ],
      ),
    ),
  ],
),
  

15. GestureDetector

Detects user interactions like taps and swipes.

body: GestureDetector(
  onTap: () {
    print("Container tapped!");
  },
  child: Container(color: Colors.orange, height: 200, width: 200),
),
  

Conclusion

Understanding what widgets can go inside the Scaffold’s body helps you create flexible and powerful Flutter layouts. Start experimenting with these and combine them for advanced UI building.