Flutter Material Design

Building beautiful Android-style apps with Material Design

🎨 What is Material Design?

Material Design is Google's design system for creating beautiful, intuitive interfaces. Flutter provides comprehensive Material widgets that follow Google's design guidelines, making it easy to build modern Android-style apps with consistent visual elements and interactions. 


import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Material Design')),
      body: Center(child: Text('Hello Material!')),
    ),
  ));
}

Output:

Material Design
Hello Material!

Core Material Widgets

📱

Scaffold

Basic app structure with AppBar and Body 

Scaffold(
  appBar: AppBar(title: Text('App')),
  body: Center(child: Text('Content')),
)
🔘

Buttons

Material buttons with elevation and ripple 

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

Cards

Elevated containers for content 

Card(
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Text('Card Content'),
  ),
)
📝

Text Fields

Material input fields 

TextField(
  decoration: InputDecoration(
    labelText: 'Enter text',
  ),
)

🔹 Material App Structure

Every Material app starts with MaterialApp widget: 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Material App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Text('Welcome to Material Design!'),
      ),
    );
  }
}

Output:

Home
Welcome to Material Design!

🔹 Material Buttons

Flutter provides three main button types: 

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    // Elevated Button (filled)
    ElevatedButton(
      onPressed: () {},
      child: Text('Elevated Button'),
    ),
    SizedBox(height: 10),
    
    // Outlined Button (border)
    OutlinedButton(
      onPressed: () {},
      child: Text('Outlined Button'),
    ),
    SizedBox(height: 10),
    
    // Text Button (flat)
    TextButton(
      onPressed: () {},
      child: Text('Text Button'),
    ),
  ],
)

Output:



🔹 FloatingActionButton

The iconic circular button for primary actions: 

Scaffold(
  appBar: AppBar(title: Text('FAB Example')),
  body: Center(child: Text('Press the button!')),
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      print('FAB pressed!');
    },
    child: Icon(Icons.add),
    tooltip: 'Add Item',
  ),
)

Output:

Press the button!
+

🔹 Material Icons

Flutter includes thousands of Material icons: 

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    Icon(Icons.home, size: 40),
    Icon(Icons.favorite, size: 40, color: Colors.red),
    Icon(Icons.settings, size: 40, color: Colors.grey),
    Icon(Icons.search, size: 40, color: Colors.blue),
  ],
)

Output:

🏠 ❤️ ⚙️ 🔍

🧠 Test Your Knowledge

Which widget provides the basic Material app structure?