Widget: Material Components

Import 'package:flutter/material.dart';

void main() {
    title: 'Flutter Tutorial',
    home: TutorialHome(),

class TutorialHome extends StatelessWidget {
  Widget build(BuildContext context) {
    // Scaffold is a layout for the major Material Components.
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.menu),
          tooltip: 'Navigation menu',
          onPressed: null,
        title: Text('Example title'),
        actions: <Widget>[
            icon: Icon(Icons.search),
            tooltip: 'Search',
            onPressed: null,
      // body is the majority of the screen.
      body: Center(
        child: Text('Hello, world!'),
      floatingActionButton: FloatingActionButton(
        tooltip: 'Add', // used by assistive technologies
        child: Icon(Icons.add),
        onPressed: null,

A Material app starts with the MaterialApp widget, which builds a number of useful widgets at the root of your app, including a Navigator, which manages a stack of widgets identified by strings, also known as “routes”.

Related concepts

Widget: Material Components — Structure map

Clickable & Draggable!

Widget: Material Components — Related pages: