Skip to main content
Mapagam

Using Material Design Widgets

1. Using Scaffold Widget

Property Values Description
appBar AppBar Displays a top app bar with title and actions.
body Widget The main content of the scaffold.
floatingActionButton FloatingActionButton Displays a floating action button.
drawer Drawer Displays a side drawer for navigation.
bottomNavigationBar BottomNavigationBar Displays a bottom navigation bar.

Example: Basic Scaffold Usage

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("My App"),
        ),
        body: Center(
          child: Text("Hello, Flutter!"),
        ),
      ),
    );
  }
}

2. Using AppBar Widget

Property Values Description
title Widget The primary text displayed in the app bar
leading Widget? Widget placed before the title, typically a back button or menu icon
actions List<Widget>? Widgets placed after the title, usually for icons or buttons
backgroundColor Color? Background color of the app bar
elevation double? Shadow elevation of the app bar (default is 4.0)
centerTitle bool? Whether to center the title (default is true)

Example: Basic AppBar Usage

AppBar(
  title: Text('My App'),
  leading: IconButton(
    icon: Icon(Icons.menu),
    onPressed: () {},
  ),
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {},
    ),
  ],
)
Note: The AppBar widget is part of the Material Design component library and requires a Scaffold to be used properly.

3. Using FloatingActionButton Widget

Property Values Description
child Widget? Child widget to display inside the FAB. Usually an Icon.
elevation double Elevation of the FAB. Default is 6.0.
backgroundColor Color? Background color of the FAB. Defaults to Theme.of(context).floatingActionButtonTheme.backgroundColor.
foregroundColor Color? Foreground color (e.g., icon color). Defaults to Theme.of(context).floatingActionButtonTheme.foregroundColor.
onPressed VoidCallback? Callback when the FAB is pressed. Required for interactivity.
shape OutlinedBorder? Shape of the FAB. Default is CircleBorder().

Example: Basic FloatingActionButton

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('FloatingActionButton Example')),
      body: Center(child: Text('Hello, World!')),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text('FAB pressed!')));
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

Example: FAB with Custom Background Color

floatingActionButton: FloatingActionButton(
  onPressed: () {},
  backgroundColor: Colors.blue,
  child: Icon(Icons.refresh, color: Colors.white),
)
Note: The FloatingActionButton is typically placed at the bottom right of the screen in a Scaffold. It's designed to be used with Scaffold or similar layouts that provide a floating action button area.

4. Using Drawer Widget

Property Values Description
child Widget The widget to display inside the drawer.
elevation double The z-coordinate at which to place the drawer. Defaults to 16.0.
shadowColor Color The color to use for the drawer's shadow. Defaults to Colors.black.
width double The width of the drawer. Defaults to 305.0.

Example: Basic Drawer

Drawer(
  child: ListView(
    padding: EdgeInsets.zero,
    children: [
      DrawerHeader(
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
        child: Text('Drawer Header'),
      ),
      ListTile(
        title: Text('Item 1'),
        onTap: () {
          // Handle tap
        },
      ),
    ],
  ),
)
Note: The Drawer widget is typically used inside a Scaffold to provide navigation and other UI elements.
Warning: Ensure that the Drawer is placed correctly within a Scaffold to avoid layout issues.

5. Using BottomNavigationBar Widget

Property Values Description
items List<BottomNavigationBarItem> Required list of items to display in the navigation bar
currentIndex int Index of the currently selected item (0-based)
onTap Function(int) Callback function when an item is tapped
type BottomNavigationBarType Style of the navigation bar (fixed or shifting)
elevation double Elevation of the navigation bar (default: 8.0)
selectedLabelStyle TextStyle Text style for selected item labels
unselectedLabelStyle TextStyle Text style for unselected item labels

Example: Basic BottomNavigationBar

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Bottom Navigation Example")),
      body: Center(
        child: Text("Selected index: $_selectedIndex"),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
}

Example: Shifting BottomNavigationBar

BottomNavigationBar(
  type: BottomNavigationBarType.shifting,
  items: <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
      backgroundColor: Colors.blue,
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.search),
      label: 'Search',
      backgroundColor: Colors.green,
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: 'Profile',
      backgroundColor: Colors.purple,
    ),
  ],
  currentIndex: _selectedIndex,
  onTap: _onItemTapped,
)
Note: The BottomNavigationBar requires at least 2 items and supports up to 5. The type property determines whether the bar is fixed or shifting, affecting how items are displayed and animated.

6. Using NavigationBar Widget

Property Description Values
destinations List of navigation destinations List<NavigationDestination>
selectedIndex Currently selected destination index int
onDestinationSelected Callback when a destination is selected void Function(int index)
labelBehavior Controls whether labels are shown NavigationDestinationLabelBehavior
height Height of the navigation bar double?
indicatorColor Color of the indicator Color?
mouseCursor Mouse cursor to show on hover MouseCursor?

Example: Basic NavigationBar

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(child: Text('Home Content')),
      bottomNavigationBar: NavigationBar(
        destinations: [
          NavigationDestination(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          NavigationDestination(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
        ],
        selectedIndex: 0,
        onDestinationSelected: (int index) {
          // Handle selection
        },
      ),
    );
  }
}
Note: NavigationBar is part of Material 3 design system and requires useMaterial3: true in the MaterialApp.

Key Features

  • Supports Material 3 design
  • Can be customized with icons and labels
  • Provides visual feedback for selected items
  • Works with NavigationRail and BottomNavigationBar

7. Using BottomAppBar Widget

Property Values Description
child Widget? The widget to display inside the BottomAppBar.
shape BottomAppBarShape? The shape of the BottomAppBar, e.g., ContinuousRectangleBorder.
elevation double? The elevation of the BottomAppBar, affects shadow.
color Color? The background color of the BottomAppBar.
padding EdgeInsetsGeometry? The padding inside the BottomAppBar.
notchMargin double? The margin around the notch in a floating BottomAppBar.
clipBehavior Clip? The clip behavior for the BottomAppBar, e.g., Clip.none.

Example: Basic BottomAppBar

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("BottomAppBar Example")),
        body: Center(child: Text("Content area")),
        bottomNavigationBar: BottomAppBar(
          child: Container(
            height: 56,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                IconButton(icon: Icon(Icons.home), onPressed: () {}),
                IconButton(icon: Icon(Icons.search), onPressed: () {}),
                IconButton(icon: Icon(Icons.person), onPressed: () {}),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Example: Floating BottomAppBar with Notch

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Floating BottomAppBar")),
        body: Center(child: Text("Content area")),
        bottomNavigationBar: BottomAppBar(
          shape: CircularNotchedRectangle(),
          notchMargin: 8.0,
          child: Container(
            height: 56,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                IconButton(icon: Icon(Icons.home), onPressed: () {}),
                IconButton(icon: Icon(Icons.search), onPressed: () {}),
                IconButton(icon: Icon(Icons.person), onPressed: () {}),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
Note: The shape property can be used to create a floating action button notch in the BottomAppBar.

8. Using TabBar and TabBarView Widgets

Property Values Description
controller TabController Optional controller to manage the tab bar state
tabs List<Widget> Required list of Tab widgets to display
labelColor Color Color of the active tab label
unselectedLabelColor Color Color of the inactive tab labels
indicatorColor Color Color of the tab indicator (line under active tab)
indicatorWeight double Height of the tab indicator

Example: Basic TabBar Usage

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: Text('TabBar Example'),
            bottom: TabBar(
              tabs: [
                Tab(text: 'Home'),
                Tab(text: 'Profile'),
                Tab(text: 'Settings'),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text('Home Content')),
              Center(child: Text('Profile Content')),
              Center(child: Text('Settings Content')),
            ],
          ),
        ),
      ),
    );
  }
}

Example: TabBar with Custom Indicator

TabBar(
  indicatorColor: Colors.blue,
  indicatorWeight: 3.0,
  labelColor: Colors.blue,
  unselectedLabelColor: Colors.grey,
  tabs: [
    Tab(text: 'Tab 1'),
    Tab(text: 'Tab 2'),
    Tab(text: 'Tab 3'),
  ],
)
Note: The DefaultTabController is used to provide a default controller for the tabs. For more control, use TabController directly.

Example: TabBarView with Scrollable Tabs

TabBarView(
  children: [
    Container(color: Colors.red),
    Container(color: Colors.green),
    Container(color: Colors.blue),
    Container(color: Colors.yellow),
    Container(color: Colors.purple),
  ],
)

Key Points

  • TabBar displays a row of tabs with indicators.
  • TabBarView shows content for the selected tab.
  • Use DefaultTabController or TabController to manage state.
  • Customize appearance with properties like indicatorColor and labelColor.

9. Using Card Widget

Property Values Description
child Widget? The widget to be displayed inside the card.
elevation double? The z-coordinate at which to place the card. A higher value creates a stronger shadow.
margin EdgeInsetsGeometry? The amount of space to leave around the card.
shape ShapeBorder? The shape of the card's border.
color Color? The background color of the card.

Example: Basic Card

Card(
  child: Padding(
    padding: EdgeInsets.all(16.0),
    child: Text('This is a basic card.'),
  ),
)

Example: Card with Image

Card(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Image.asset('assets/images/flutter_logo.png'),
      ListTile(
        title: Text('Flutter Logo'),
        subtitle: Text('A beautiful UI toolkit'),
      ),
    ],
  ),
)
Note: Cards are commonly used in lists or grids to group related content.

10. Using ListTile Widget

Property Values Description
title Widget Primary content of the list tile
subtitle Widget Secondary content below the title
leading Widget Icon or image at the start of the tile
trailing Widget Icon or widget at the end of the tile
onTap VoidCallback Callback when the tile is tapped
dense bool Reduces the height of the tile

Example: Basic ListTile

ListTile(
  title: Text('Home'),
  subtitle: Text('Go to home screen'),
  leading: Icon(Icons.home),
  trailing: Icon(Icons.arrow_forward),
  onTap: () {
    Navigator.pushNamed(context, '/home');
  },
)

Example: ListTile with Dense Style

ListTile(
  title: Text('Settings'),
  subtitle: Text('Manage app preferences'),
  leading: Icon(Icons.settings),
  dense: true,
)

11. Using ExpansionTile Widget

Property Values Description
header Widget Widget to display as the expansion tile's header
children List<Widget> Widgets to display when the tile is expanded
isExpanded bool Controls whether the tile is expanded or collapsed
onExpansionChanged void Function(bool) Callback when the expansion state changes

Example: Basic ExpansionTile Usage

ExpansionTile(
  header: Text('Click to expand'),
  children: [
    ListTile(title: Text('Item 1')),
    ListTile(title: Text('Item 2')),
  ],
)

Example: ExpansionTile with Custom Header

ExpansionTile(
  header: Row(
    children: [
      Icon(Icons.arrow_drop_down),
      Text('Custom Header'),
    ],
  ),
  children: [
    ListTile(title: Text('Expanded content')),
  ],
)

12. Using Divider and VerticalDivider Widgets

Property Values Description
color Color Color of the divider line. Defaults to Theme.of(context).dividerColor.
indent double Distance from the start of the divider to the beginning of the line. Defaults to 0.
endIndent double Distance from the end of the divider to the end of the line. Defaults to 0.
thickness double Thickness of the divider line. Defaults to 1.0.

Example: Using Divider Widget

Divider(
  color: Colors.grey,
  thickness: 2.0,
  indent: 20.0,
  endIndent: 20.0,
)

Example: Using VerticalDivider Widget

Row(
  children: [
    Text('Left'),
    VerticalDivider(
      color: Colors.blue,
      thickness: 3.0,
    ),
    Text('Right'),
  ],
)
Note: Divider is horizontal by default, while VerticalDivider is vertical. Both widgets are commonly used to separate sections in lists or layouts.

Was this article helpful?

Related Cheat Sheets