Flutter Widgets

Flutter Widgets Explain and Example

A widget in Flutter is a reusable, encapsulated piece of user interface. Widgets can range from simple elements like text or buttons to more complex structures like containers and lists. Widgets are nested with each other to build the app. It means the root of your app is itself a widget, and all the way down is a widget too. For example, a widget can display something, can define design, can handle interaction, etc.

MaterialApp:-

Represents the root of a Flutter application and provides various configuration options.

MaterialApp(
  home: MyHomePage(),
  title: 'My App',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
)

Scaffold:

Implements the basic material design visual structure.

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

SafeArea:

Ensures that a widget's children are positioned within the safe area of a device, avoiding system overlays.

SafeArea(
  child: YourWidget(),
)

Container:

A box model that can contain other widgets and allows customization of dimensions, padding, margin, etc.

Container(
  width: 150.0,
  height: 150.0,
  margin: EdgeInsets.all(10.0),
  padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
  color: Colors.black,
  child: Text('Hello, Flutter!'),
)

Column:

A widget that arranges its children vertically.

Column(
  children:[
    Text('M First Child'),
    Text('M Second Child'),
  ],
)

Row:

A widget that arranges its children horizontally.

Row(
  children:[
    Icon(Icons.star),
    Icon(Icons.star),
    Icon(Icons.star),
    // ... additional row children
  ],
)

AppBar:

A material design app bar.

AppBar(
  title: Text('My App'),
  actions: [
    IconButton(
      icon: Icon(Icons.add),
      onPressed: () {
        // Handle add action
      },
    ),
  ],
)

Text:

Displays a paragraph of text.

Text(
  'Hello, Flutter!',
  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
)

Icon:

A graphical icon widget is drawn with a glyph from a font described in an IconData such as the material's predefined IconDatas.

Icon(
  Icons.star,
  color: Colors.red,
  size: 30.0,
)

FlatButton:

A flat button that changes appearance when pressed.

FlatButton(
  onPressed: () {
    // Handle button press like post like
  },
  child: Text('Like Me'),
)

TextField:

Accepts user input as text.

TextField(
  decoration: InputDecoration(
    labelText: 'Enter your name',
  ),
  onChanged: (text) {
    // Handle text input changes
  },
)

Card:

A material design card.

Card(
  child: ListTile(
    title: Text('My Card Title'),
    subtitle: Text('My Card Subtitle'),
    leading: Icon(Icons.card_giftcard),
  ),
)

Stack:

A widget that positions children relative to the edges of a stack.

Stack(
  children:[
    Positioned(
      top: 10.0,
      left: 10.0,
      child: Text('Positioned Widget'),
    ),
    Text('Hello, Flutter!',
    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
  )
    // ... other stack children
  ],
)

Drawer:

A material design panel that slides in horizontally from the edge of a Scaffold.

Drawer(
  child: ListView(
    children: [
      ListTile(
        title: Text('Item 1'),
        onTap: () {
          // Handle item tap
        },
      ),
      // ... additional drawer items
    ],
  ),
)

BottomNavigationBar:

A material design widget that displays a horizontal row of tabs.

BottomNavigationBar(
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.profile),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.search),
      label: 'Search',
    ),
    // ... additional tabs
  ],
  currentIndex: 0,
  onTap: (index) {
    // Handle tab selection
  },
)

Switch:

A material design switch.

Switch(
  value: true,
  onChanged: (value) {
    // Handle switch the state change
  },
)

DatePicker:

Allows the user to pick a date.

showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2000),
  lastDate: DateTime(2100),
);

TimePicker:

Allows the user to pick a time.

showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
);

ExpansionTile:

A single-level expansion tile.

ExpansionTile(
  title: Text('Expand me'),
  children: [
    ListTile(
      title: Text('Subitem a'),
    ),
    ListTile(
      title: Text('Subitem b'),
    ),
    // ... additional subitems
  ],
)

WebView:

Embeds a web page within the Flutter app.

WebView(
  initialUrl: 'https://flutterpules.blogspot.com/',
  javascriptMode: JavascriptMode.unrestricted,
)

PageView:

A scrollable list of widgets that are each visible on the screen one at a time.

PageView(
  children: [
    Container(color: Colors.red),
    Container(color: Colors.yellow),
    Container(color: Colors.black),
    // ... additional pages
  ],
)

TabBarView:

A scrollable view of widgets that are each associated with a tab.

TabBarView(
  children: [
    TabScreen1(),
    TabScreen2(),
    TabScreen2(),
    // ... additional tab screens
  ],
)

DropdownButton:

A button that, when pressed, shows a menu with a list of items.

DropdownButton<String>(
      value: selectedValue,
      onChanged: (newValue) {
        // Handle dropdown selection
      },
      items: <String>['Option a', 'Option b', 'Option c']
        .map<DropdownMenuItem<String>>((String value) {
          return DropdownMenuItem<String>(
            value: value,
            child: Text(value),
          );
        })
        .toList(),
    )
  

AlertDialog:

A dialog that interrupts the user's workflow to get a response.

showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      title: Text('This is Alert Dialog'),
      content: Text('This is an alert message.'),
      actions: [
        FlatButton(
          child: Text('Okay'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ],
    );
  },
);

Stepper:

A material design stepper widget.

  Stepper(
      steps: <Step>[
        Step(
          title: Text('Step 1'),
          content: Text('This is step 1.'),
        ),
        Step(
          title: Text('Step 2'),
          content: Text('This is step 2.'),
        ),
        // ... additional steps
      ],
    )
  

Divider:

A thin horizontal line, with padding on either side.

Divider(
  color: Colors.black,
  thickness: 2.0,
)