Flutter Widget Guidance

Welcome to the Flutter Widget Guide! In this guide, you will find examples of various widgets along with their use cases. Flutter is a powerful UI toolkit, and understanding different widgets and their purposes is essential for building great mobile applications.

Table of Contents

• Basic Widgets

• Text and Images

• Input and Form Widgets

• List Widgets

• Navigation and Routing Widgets

• Animation Widgets

• Layout Widgets

• Image and Icon Handling

• Material Design Widgets

• Cupertino Design Widgets

• Other Important Widgets

Basic Widgets

Container

Purpose: A box that can contain other widgets and style them using properties like color, padding, margin, and borders.

Container(
  color: Colors.blue,
  padding: EdgeInsets.all(16),
  margin: EdgeInsets.symmetric(vertical: 8),
  child: Text('Hello, Flutter!'),
)

Row

Purpose: A widget that arranges its children widgets in a horizontal line.

Row(
  children: [
    Icon(Icons.star),
    Text('Flutter'),
  ],
)

Column

Purpose: A widget that arranges its children widgets in a vertical line.

Column(
  children: [
    Text('Hello'),
    Text('Flutter'),
  ],
)

Center

Purpose: A widget that centers its child widget within itself.

Center(
  child: Text('Hello, Flutter!'),
)

Expanded

Purpose: A widget that expands to fill the available space within a parent widget.

Row(
  children: [
    Expanded(
      child: Container(
        color: Colors.blue,
        height: 50,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.green,
        height: 50,
      ),
    ),
  ],
)

Padding

Purpose: A widget that adds padding around its child widget.

Padding(
  padding: EdgeInsets.all(16),
  child: Text('Hello, Flutter!'),
)

ListView

Purpose: A scrollable list of widgets that can be displayed vertically or horizontally.

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

GridView

Purpose: A scrollable grid of widgets that can be displayed in a 2D layout.

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

Stack

Purpose: A widget that overlays its children widgets on top of each other.

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

Positioned

Purpose: A widget that positions its child widget at a specific position within a Stack.

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

Text and Images

Text

Purpose: A widget that displays a piece of text.

Text('Hello, Flutter!')

RichText

Purpose: A widget that displays a paragraph of mixed-style text.

RichText(
  text: TextSpan(
    text: 'Hello',
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(text: ' Flutter!', style: TextStyle(fontWeight: FontWeight.bold)),
    ],
  ),
)

Image

Purpose: A widget that displays an image from the local assets or the internet.

Image.asset('assets/image.png')

Icon

Purpose: A widget that displays a material design icon.

Icon(Icons.star)

Placeholder

Purpose: A widget that displays a box with a specified width, height, and color.

Placeholder(
  color: Colors.blue,
  fallbackWidth: 100,
  fallbackHeight: 100,
)

Tooltip

Purpose: A widget that shows a short message when the user long-presses on it.

Tooltip(
  message: 'This is a tooltip',
  child: IconButton(
    icon: Icon(Icons.info),
    onPressed: () {},
  ),
)

Input and Form Widgets

TextField

Purpose: A widget that allows users to enter text.

TextField(
  decoration: InputDecoration(
    labelText: 'Enter your name',
  ),
)

TextFormField

Purpose: A more advanced version of TextField that is used within a Form widget.

TextFormField(
  decoration: InputDecoration(
    labelText: 'Enter your email',
  ),
  validator: (value) {
    if (value.isEmpty) {
      return 'Please enter your email';
    }
    return null;
  },
)

RaisedButton

Purpose: A widget that displays a button with a raised appearance.

RaisedButton(
  onPressed: () {},
  child: Text('Click Me'),
)

FlatButton

Purpose: A widget that displays a flat button.

FlatButton(
  onPressed: () {},
  child: Text('Click Me'),
)

IconButton

Purpose: A widget that displays a button with an icon.

IconButton(
  icon: Icon(Icons.favorite),
  onPressed: () {},
)

Checkbox

Purpose: A widget that allows users to select multiple options from a list.

Checkbox(
  value: isChecked,
  onChanged: (value) {
    setState(() {
      isChecked = value;
    });
  },
)

Radio

Purpose: A widget that allows users to select a single option from a list.

Radio(
  value: selectedValue,
  groupValue: groupValue,
  onChanged: (value) {
    setState(() {
      groupValue = value;
    });
  },
)

Slider

Purpose: A widget that allows users to select a value from a range of values.

Slider(
  value: sliderValue,
  min: 0,
  max: 100,
  onChanged: (value) {
    setState(() {
      sliderValue = value;
    });
  },
)

Switch

Purpose: A widget that allows users to toggle between two states.

Switch(
  value: switchValue,
  onChanged: (

value) {
    setState(() {
      switchValue = value;
    });
  },
)

List Widgets

ListView

Purpose: A scrollable list of widgets that can be displayed vertically or horizontally.

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

ListTile

Purpose: A widget that displays a single fixed-height row with a leading icon, title, and subtitle.

ListView(
  children: [
    ListTile(
      leading: Icon(Icons.star),
      title: Text('Flutter'),
      subtitle: Text('Beautiful UI toolkit'),
    ),
  ],
)

GridView

Purpose: A scrollable grid of widgets that can be displayed in a 2D layout.

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

SliverGrid

Purpose: A grid with slivers that can be used with CustomScrollView.

CustomScrollView(
  slivers: [
    SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
      ),
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            color: Colors.blue,
            height: 100,
          );
        },
        childCount: 4,
      ),
    ),
  ],
)

ExpansionTile

Purpose: A widget that displays a tile that can be expanded or collapsed to reveal hidden content.

ExpansionTile(
  title: Text('Expandable Tile'),
  children: [
    Text('Hidden content'),
  ],
)

ListView.builder

Purpose: A more efficient way to create a ListView with a large number of children.

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(title: Text(items[index]));
  },
)

GridView.builder

Purpose: A more efficient way to create a GridView with a large number of children.

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  itemCount: items.length,
  itemBuilder: (context, index) {
    return Container(color: Colors.blue);
  },
)

Navigation and Routing Widgets

MaterialApp

Purpose: A widget that sets up the necessary material design elements for an app.

MaterialApp(
  home: HomePage(),
)

Scaffold

Purpose: A widget that provides a basic structure for implementing material design components.

Scaffold(
  appBar: AppBar(title: Text('App')),
  body: Center(child: Text('Hello, Flutter!')),
)

AppBar

Purpose: A widget that displays an app bar with a title and optional actions.

AppBar(
  title: Text('App Title'),
  actions: [
    IconButton(icon: Icon(Icons.settings), onPressed: () {}),
    IconButton(icon: Icon(Icons.search), onPressed: () {}),
  ],
)

BottomNavigationBar

Purpose: A widget that displays a bottom navigation bar.

BottomNavigationBar(
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
    BottomNavigationBarItem(icon: Icon(Icons.favorite), label: 'Favorites'),
    BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
  ],
)

Drawer

Purpose: A widget that displays a side drawer that can be shown by swiping from the left or right.

Scaffold(
  appBar: AppBar(title: Text('App')),
  body: Center(child: Text('Hello, Flutter!')),
  drawer: Drawer(
    child: ListView(
      children: [
        ListTile(title: Text('Item 1')),
        ListTile(title: Text('Item 2')),
        ListTile(title: Text('Item 3')),
      ],
    ),
  ),
)

Navigator

Purpose: A widget that manages a stack of pages and transitions between them.

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondPage(),
  ),
)

MaterialPageRoute

Purpose: A class that defines a basic page route that transitions to a new page.

MaterialPageRoute(
  builder: (context) => SecondPage(),
)

CupertinoPageRoute

Purpose: A class that defines a page route that provides a cupertino-style transition.

CupertinoPageRoute(
  builder: (context) => SecondPage(),
)

Animation Widgets

AnimatedContainer

Purpose: A container that automatically animates its changes when the properties change.

AnimatedContainer(
  duration: Duration(seconds: 1),
  width: _isExpanded ? 200 : 100,
  height: _isExpanded ? 200 : 100,
  color: _isExpanded ? Colors.blue : Colors.red,
)

AnimatedCrossFade

Purpose: A widget that cross-fades between two children when switching between them.

AnimatedCrossFade(
  duration: Duration(seconds: 1),
  firstChild: Container(color: Colors.blue, height: 100, width: 100),
  secondChild: Container(color: Colors.red, height: 200, width: 200),
  crossFadeState: _showFirst ? CrossFadeState.showFirst : CrossFadeState.showSecond,
)

Hero

Purpose: A widget that animates the shared transition of its tag with another Hero widget.

Hero(
  tag: 'logo',
  child: Image.asset('assets/logo.png'),
)

AnimatedBuilder

Purpose: A widget that rebuilds when given an Animation object.

AnimatedBuilder(
  animation: _controller,
  builder: (context, child) {
    return Transform.rotate(
      angle: _controller.value * 2.0 * pi,
      child: child,
    );
  },
  child: Icon(Icons.refresh),
)

SlideTransition

Purpose: A widget that animates the position of its child from an initial offset to an end offset.

SlideTransition(
  position: _animation,
  child: Container(color: Colors.blue, height: 100, width: 100),
)

FadeTransition

Purpose: A widget that animates the opacity of its child.

FadeTransition(
  opacity: _animation,
  child: Container(color: Colors.blue, height: 100, width: 100),
)

RotationTransition

Purpose: A widget that animates the rotation of its child.

RotationTransition(
  turns: _animation,
  child: Container(color: Colors.blue, height: 100, width: 100),
)

Layout Widgets

SizedBox

Purpose: A box with a fixed width and height.

SizedBox(
  width: 200,
  height: 100,
  child: Container(color: Colors.blue),
)

Flexible

Purpose: A widget that takes up available space and shares it with other flexible widgets.

Row(
  children: [
    Flexible(flex: 1, child

: Container(color: Colors.blue, height: 50)),
    Flexible(flex: 2, child: Container(color: Colors.green, height: 50)),
  ],
)

Wrap

Purpose: A widget that wraps its children to the next line when there is insufficient space.

Wrap(
  children: [
    Chip(label: Text('Tag 1')),
    Chip(label: Text('Tag 2')),
    Chip(label: Text('Tag 3')),
  ],
)

AspectRatio

Purpose: A widget that attempts to size the child to a specific aspect ratio.

AspectRatio(
  aspectRatio: 16 / 9,
  child: Image.asset('assets/image.png'),
)

ConstrainedBox

Purpose: A widget that imposes constraints on its child.

ConstrainedBox(
  constraints: BoxConstraints(minWidth: 100, minHeight: 100),
  child: Container(color: Colors.blue),
)

FittedBox

Purpose: A widget that scales and positions its child within itself.

FittedBox(
  fit: BoxFit.cover,
  child: Image.asset('assets/image.png'),
)

Image and Icon Handling

Image

Purpose: A widget that displays an image from the local assets or the internet.

Image.asset('assets/image.png')

ImageIcon

Purpose: A widget that displays a material design icon as an image.

ImageIcon(Icons.star)

Image.network

Purpose: A widget that displays an image from the internet.

Image.network('https://example.com/image.jpg')

Image.asset

Purpose: A widget that displays an image from the local assets.

Image.asset('assets/image.png')

Icon

Purpose: A widget that displays a material design icon.

Icon(Icons.star)

IconButton

Purpose: A widget that displays a button with an icon.

IconButton(
  icon: Icon(Icons.favorite),
  onPressed: () {},
)

CircleAvatar

Purpose: A widget that displays a circular avatar.

CircleAvatar(
  backgroundImage: AssetImage('assets/avatar.jpg'),
  radius: 50,
)

Material Design Widgets

Card

Purpose: A widget that displays a material design card.

Card(
  child: Column(
    children: [
      ListTile(title: Text('Title'), subtitle: Text('Subtitle')),
      Image.asset('assets/image.png'),
      ButtonBar(
        children: [
          FlatButton(child: Text('Button 1'), onPressed: () {}),
          FlatButton(child: Text('Button 2'), onPressed: () {}),
        ],
      ),
    ],
  ),
)

AppBar

Purpose: A widget that displays an app bar with a title and optional actions.

AppBar(
  title: Text('App Title'),
  actions: [
    IconButton(icon: Icon(Icons.settings), onPressed: () {}),
    IconButton(icon: Icon(Icons.search), onPressed: () {}),
  ],
)

BottomNavigationBar

Purpose: A widget that displays a bottom navigation bar.

BottomNavigationBar(
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
    BottomNavigationBarItem(icon: Icon(Icons.favorite), label: 'Favorites'),
    BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
  ],
)

FloatingActionButton

Purpose: A widget that displays a floating action button.

FloatingActionButton(
  onPressed: () {},
  child: Icon(Icons.add),
)

Material

Purpose: A widget that sets the material design for its children.

Material(
  elevation: 4,
  color: Colors.blue,
  borderRadius: BorderRadius.circular(8),
  child: Container(
    width: 100,
    height: 100,
    child: Center(child: Text('Material')),
  ),
)

AlertDialog

Purpose: A widget that displays a material design alert dialog.

AlertDialog(
  title: Text('Alert Dialog'),
  content: Text('This is an alert dialog.'),
  actions: [
    FlatButton(child: Text('OK'), onPressed: () {}),
    FlatButton(child: Text('Cancel'), onPressed: () {}),
  ],
)

Cupertino Design Widgets

CupertinoApp

Purpose: A widget that sets up the necessary cupertino design elements for an app.

CupertinoApp(
  home: HomePage(),
)

CupertinoNavigationBar

Purpose: A widget that displays a cupertino-style navigation bar.

CupertinoNavigationBar(
  middle: Text('App Title'),
  trailing: IconButton(icon: Icon(Icons.search), onPressed: () {}),
)

CupertinoButton

Purpose: A widget that displays a cupertino-style button.

CupertinoButton(
  onPressed: () {},
  child: Text('Click Me'),
)

CupertinoAlertDialog

Purpose: A widget that displays a cupertino-style alert dialog.

CupertinoAlertDialog(
  title: Text('Alert Dialog'),
  content: Text('This is a cupertino-style alert dialog.'),
  actions: [
    CupertinoDialogAction(child: Text('OK'), onPressed: () {}),
    CupertinoDialogAction(child: Text('Cancel'), onPressed: () {}),
  ],
)

CupertinoPicker

Purpose: A widget that displays a cupertino-style picker.

CupertinoPicker(
  itemExtent: 32,
  onSelectedItemChanged: (index) {},
  children: [
    Text('Option 1'),
    Text('Option 2'),
    Text('Option 3'),
  ],
)

Other Important Widgets

WebView

Purpose: A widget that displays a web page in the app.

WebView(
  initialUrl: 'https://example.com',
)

VideoPlayer

Purpose: A widget that displays a video player in the app.

VideoPlayerController controller = VideoPlayerController.asset('assets/video.mp4');
VideoPlayer(controller),

PageView

Purpose: A widget that displays a scrollable list of pages.

PageView(
  children: [
    Container(color: Colors.red),
    Container(color: Colors.blue),
    Container(color: Colors.green),
  ],
)

Stepper

Purpose: A widget that displays a material design stepper.

Stepper(
  steps: [
    Step(title: Text('Step 1'), content: Text('Step 1 content')),
    Step(title: Text('Step 2'), content: Text('Step 2 content')),
    Step(title: Text('Step 3'), content: Text('Step 3 content')),
  ],
)

ShaderMask

Purpose: A widget that applies a shader to its child.

ShaderMask(
  shaderCallback: (rect) {
    return RadialGradient(
      center: Alignment.topLeft,
      radius: 1.0,
      colors: [Colors.yellow, Colors.transparent],
      tileMode: TileMode.clamp,
    ).createShader(rect);
  },
  child: Image.asset('assets/image.png'),
)

BackdropFilter

Purpose: A widget that applies a filter to its child.

BackdropFilter(
  filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
  child: Container(color: Colors.blue.withOpacity(0.5)),
)

This is just a selection of some commonly used Flutter widgets. The Flutter ecosystem is vast, and there are many more widgets and features to explore. Happy coding with Flutter!

For more information and detailed documentation on all widgets, please refer to the official Flutter documentation: https://flutter.dev/docs