Flutter Widget Catalog

🧩 What are Flutter Widgets?

Widgets are the building blocks of Flutter apps. Everything in Flutter is a widget, from buttons and text to layouts and animations. They describe what the UI should look like based on current state.


// Simple widget example
Text('Hello Flutter!')

// Widget with styling
Container(
  padding: EdgeInsets.all(16),
  child: Text('Styled Widget'),
)

Widget Categories

📦

Layout Widgets

Arrange and position child widgets on screen. Includes Container, Row, Column, Stack, and Padding for creating flexible and responsive layouts in your application.

📝

Text Widgets

Display and style text content beautifully. Use Text, RichText, and TextField widgets with custom fonts, colors, sizes, and formatting for readable interfaces.

🖼️

Media Widgets

Show images, icons, and visual content. Image, Icon, and CircleAvatar widgets help display graphics from assets, network, or memory with various fit options.

🎯

Input Widgets

Capture user interactions and data input. Buttons, TextFields, Checkboxes, Sliders, and Switches enable users to interact with and control your application effectively.

🔹 Basic Layout Widgets

Essential widgets for arranging UI elements:

🔸 Container Widget

Container(
  width: 200,
  height: 100,
  padding: EdgeInsets.all(16),
  margin: EdgeInsets.all(8),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(12),
    boxShadow: [
      BoxShadow(
        color: Colors.grey,
        blurRadius: 5,
        offset: Offset(2, 2),
      ),
    ],
  ),
  child: Text(
    'Styled Container',
    style: TextStyle(color: Colors.white),
  ),
)

🔸 Row and Column

// Horizontal layout
Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    Icon(Icons.home),
    Icon(Icons.search),
    Icon(Icons.settings),
  ],
)

// Vertical layout
Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('Title'),
    Text('Subtitle'),
    ElevatedButton(
      onPressed: () {},
      child: Text('Click Me'),
    ),
  ],
)

🔹 Text Widgets

Display and style text content:

🔸 Basic Text

Text(
  'Hello Flutter!',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
    letterSpacing: 1.5,
  ),
)

// Rich text with multiple styles
RichText(
  text: TextSpan(
    text: 'Hello ',
    style: TextStyle(color: Colors.black),
    children: [
      TextSpan(
        text: 'Flutter',
        style: TextStyle(
          fontWeight: FontWeight.bold,
          color: Colors.blue,
        ),
      ),
      TextSpan(text: '!'),
    ],
  ),
)

🔸 TextField

TextField(
  decoration: InputDecoration(
    labelText: 'Enter your name',
    hintText: 'John Doe',
    prefixIcon: Icon(Icons.person),
    border: OutlineInputBorder(),
  ),
  onChanged: (value) {
    print('Input: $value');
  },
)

🔹 Button Widgets

Interactive buttons for user actions:

// Elevated Button
ElevatedButton(
  onPressed: () {
    print('Button pressed');
  },
  child: Text('Elevated Button'),
)

// Text Button
TextButton(
  onPressed: () {},
  child: Text('Text Button'),
)

// Outlined Button
OutlinedButton(
  onPressed: () {},
  child: Text('Outlined Button'),
)

// Icon Button
IconButton(
  icon: Icon(Icons.favorite),
  onPressed: () {},
  color: Colors.red,
)

// Floating Action Button
FloatingActionButton(
  onPressed: () {},
  child: Icon(Icons.add),
  backgroundColor: Colors.blue,
)

🔹 Image Widgets

Display images from various sources:

// Network image
Image.network(
  'https://example.com/image.jpg',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
)

// Asset image
Image.asset(
  'assets/images/logo.png',
  width: 100,
  height: 100,
)

// Circle Avatar
CircleAvatar(
  radius: 50,
  backgroundImage: NetworkImage('https://example.com/avatar.jpg'),
  child: Text('AB'),
)

// Icon
Icon(
  Icons.star,
  size: 48,
  color: Colors.amber,
)

🔹 List Widgets

Display scrollable lists of items:

// ListView
ListView(
  children: [
    ListTile(
      leading: Icon(Icons.person),
      title: Text('John Doe'),
      subtitle: Text('Software Developer'),
      trailing: Icon(Icons.arrow_forward),
      onTap: () {},
    ),
    ListTile(
      leading: Icon(Icons.email),
      title: Text('[email protected]'),
    ),
  ],
)

// ListView.builder for dynamic lists
ListView.builder(
  itemCount: 20,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('Item $index'),
      leading: CircleAvatar(child: Text('$index')),
    );
  },
)

// GridView
GridView.count(
  crossAxisCount: 2,
  children: List.generate(6, (index) {
    return Card(
      child: Center(child: Text('Item $index')),
    );
  }),
)

🔹 Card and Dialog Widgets

Create cards and modal dialogs:

// Card widget
Card(
  elevation: 4,
  margin: EdgeInsets.all(8),
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Column(
      children: [
        Text('Card Title', style: TextStyle(fontSize: 20)),
        SizedBox(height: 8),
        Text('Card content goes here'),
      ],
    ),
  ),
)

// Show dialog
showDialog(
  context: context,
  builder: (context) => AlertDialog(
    title: Text('Alert'),
    content: Text('This is an alert dialog'),
    actions: [
      TextButton(
        onPressed: () => Navigator.pop(context),
        child: Text('Cancel'),
      ),
      TextButton(
        onPressed: () {
          // Handle action
          Navigator.pop(context);
        },
        child: Text('OK'),
      ),
    ],
  ),
)

🔹 Form Input Widgets

Collect user input with various controls:

// Checkbox
Checkbox(
  value: true,
  onChanged: (bool? value) {
    print('Checkbox: $value');
  },
)

// Switch
Switch(
  value: false,
  onChanged: (bool value) {
    print('Switch: $value');
  },
)

// Radio Button
Radio(
  value: 1,
  groupValue: selectedValue,
  onChanged: (int? value) {
    print('Radio: $value');
  },
)

// Slider
Slider(
  value: 50,
  min: 0,
  max: 100,
  divisions: 10,
  label: '50',
  onChanged: (double value) {
    print('Slider: $value');
  },
)

// DropdownButton
DropdownButton(
  value: 'Option 1',
  items: ['Option 1', 'Option 2', 'Option 3']
    .map((String value) {
      return DropdownMenuItem(
        value: value,
        child: Text(value),
      );
    }).toList(),
  onChanged: (String? newValue) {
    print('Selected: $newValue');
  },
)

🔹 Navigation Widgets

Create app bars and navigation:

// AppBar
Scaffold(
  appBar: AppBar(
    title: Text('My App'),
    actions: [
      IconButton(
        icon: Icon(Icons.search),
        onPressed: () {},
      ),
      IconButton(
        icon: Icon(Icons.more_vert),
        onPressed: () {},
      ),
    ],
  ),
  body: Center(child: Text('Content')),
)

// BottomNavigationBar
Scaffold(
  bottomNavigationBar: BottomNavigationBar(
    currentIndex: 0,
    items: [
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: 'Home',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.search),
        label: 'Search',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.person),
        label: 'Profile',
      ),
    ],
    onTap: (index) {
      print('Tapped: $index');
    },
  ),
)