Applying Material Design to flutter application

We’ve learned how to create a simple “Hello World” application in our previous post. This post demonstrates how to give a Material design to our flutter application using MaterialApp widget. We’ll also learn how to use the Material widget and Scaffold Widget.

The MaterialApp widget wraps the widgets that are used for implementing Material Design.

To add the MaterialApp widget, modify the contents of main.dart as shown below.

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      
    )
  );
}

Now I’m passing the title property as the first parameter to the MaterialApp widget. This property sets the title of the application.

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      title: "My Application",
    )
  );
}

Next, we use the home property of the MaterialApp widget to display the contents on the screen when the application starts.

Here, I’ve passed the Material widget to the home property of MaterialApp widget to modify the look and feel on the application.

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      title: "My Application",
      home: Material(
        
      )
    )
  );
}

Now, let’s add the content to be displayed on the screen. To add content to the Material widget I’m using its child property.

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      title: "My Application",
      home: Material(
        color: Colors.teal,
        child: Center(
          child: Text(
            "Hello World",
            textDirection: TextDirection.ltr,
          )
        )
      )
    )
  );
}

If you run the application now, you will get an output similar to the one shown below.

Let’s move the Text Widget to the center and apply some styles to it. To align the Text widget to center, I’m using the Center widget.

Also, I’m changing the color, fontSize, fontStyle and fontWeight properties of the Text widget.

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      title: "My Application",
      home: Material(
        color: Colors.teal,
        child: Center(
          child: Text(
            "Hello World",
            textDirection: TextDirection.ltr,
            style: TextStyle(
              color: Colors.white,
              fontWeight: FontWeight.bold,
              fontStyle: FontStyle.italic,
              fontSize: 35.0,
            ),
          )
        )
      )
    )
  );
}

This widget allows you to show drawers, snack bars, and bottom sheets in your application. In this post, I’ll be using only the appBar and body properties of the Scaffold widget.

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      title: "My Application",
      home: Scaffold(
        appBar: AppBar(title: Text("My Application")),
        body: Material(
          color: Colors.blue,
          child: Center(
              child: Text(
                "Hello World",
                textDirection: TextDirection.ltr,
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                  fontStyle: FontStyle.italic,
                  fontSize: 35.0,
                ),
              )
          ),
        )
      )
    )
  );
}

Run the application to see the output.

Applying Material Design to flutter application

MaterialApp widget

The Scaffold Widget

You might also like