The material app in flutter builds an application that uses material design. At the same time we treat it as a convenience widget that wraps a number of widgets.
In a series of articles we’re delving into the material design widgets so that we can understand the basic concepts of Flutter user interface.
As we’ve just said, Material App widget wraps a number of widgets that we use for material design applications.
Moreover the Material App builds upon a WidgetsApp by adding material-design specific functionalities.
Consequently, these functionalities could be numerous and complex; such as AnimatedTheme or GridPaper. We’ll come to that point later and discuss how we can use such complex flutter user interface.
Since the Material App builds upon a WidgetsApp, let’s first try to understand what is WidgetsApp. How it wraps the material app.
If we understand WidgetsApp, we’ll dig into the Flutter architecture and that will help us later.
What is the difference between WidgetsApp and MaterialApp?
The WidgetsApp class is the base class for both MaterialApp and CupertinoApp to implement base functionality for an app.
As a parent to both MaterialApp and CupertinoApp, the WidgetsApp class provides all material design functionalities that we have been talking about in this material design category.
So we can define the WidgetsApp class as a convenience widget that wraps a number of material design specific widgets that we commonly use for an application.
However, what is one of the most important roles of WidgetsApp?
WidgetsApp binds the system back button to popping the Navigator or quitting the application.
To clarify, any flutter application must know how to navigate from one screen to another. We must provide any screen that facility.
WidgetsApp helps its child class to implement that feature. As a result, we can define all kind of routes in our MaterialApp class. We’ll see that in a minute.
Is MaterialApp a widget?
Certainly, the MaterialApp is a widget. In addition, the MaterialApp configures the top-level Navigator to search for routes in a particular order. So that we can move to other widgets.
Let us build a MaterialApp widget and define the routes so that we can understand how it works.
Although we’re trying to give full code snippet, still to get an more detail idea, you may visit the respective GitHub repository.
import 'package:flutter/material.dart';
import 'default_page.dart';
import 'first_page.dart';
import 'home_page.dart';
import 'second_page.dart';
class MaterialAppExample extends StatelessWidget {
const MaterialAppExample({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Daily News',
theme: ThemeData(
primarySwatch: Colors.pink,
primaryColor: Colors.blue,
canvasColor: const Color.fromRGBO(255, 254, 229, 1),
textTheme: ThemeData.light().textTheme.copyWith(
bodyText2: const TextStyle(
color: Color.fromRGBO(20, 51, 51, 1),
),
bodyText1: const TextStyle(
color: Color.fromRGBO(20, 51, 51, 1),
),
headline6: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
initialRoute: '/', // default is '/'
routes: {
'/': (ctx) => const HomePage(),
FirstPage.routename: (ctx) => const FirstPage(),
SecondPage.routename: (ctx) => const SecondPage(),
},
onUnknownRoute: (settings) {
return MaterialPageRoute(
builder: (ctx) => const DefaultPage(),
);
},
);
}
}We’ve defined the theme of our flutter app in MaterialApp widget. However, we’ll discuss that in a later article in great detail.
At present we concentrate on route and navigation part.
Besides this MaterialApp widget we’ve created three more screens. The first page, second page and a fall back page Default page.
Watch this part of the above code:
initialRoute: '/', // default is '/'
routes: {
'/': (ctx) => const HomePage(),
FirstPage.routename: (ctx) => const FirstPage(),
SecondPage.routename: (ctx) => const SecondPage(),
},
onUnknownRoute: (settings) {
return MaterialPageRoute(
builder: (ctx) => const DefaultPage(),
);
},
...We’ve defined both the initial route and the ‘/’ route that points to actually the home property.
As a matter of fact, we could have written the above code as the following:
home: const HomePage(),
routes: {
FirstPage.routename: (ctx) => const FirstPage(),
SecondPage.routename: (ctx) => const SecondPage(),
},
onUnknownRoute: (settings) {
return MaterialPageRoute(
builder: (ctx) => const DefaultPage(),
);
},
...The above code will also work.
Subsequently we’ve also found that any MaterialApp widget starts with Scaffold widget.
What is the difference between material app and scaffold?
The Scaffold widget acts as a base class or child of material app. Once flutter framework knows that we’re going to use material app, it organizes all material components and follow material design.
However, it directs the next child Scaffold to provide many basic functionalities that only Scaffold can provide.
Let’s see the code of home page, so we can understand how it works.
import 'package:flutter/material.dart';
import 'first_page.dart';
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
static const routename = '/first';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Home Page'),
),
body: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const FirstPage()),
);
},
child: Container(
margin: const EdgeInsets.all(10.0),
padding: const EdgeInsets.all(10.0),
child: ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(15.0),
topRight: Radius.circular(15.0),
bottomLeft: Radius.circular(15.0),
bottomRight: Radius.circular(15.0),
),
child: Image.network(
'https://cdn.pixabay.com/photo/2020/05/15/14/03/lake-5173683_960_720.jpg'),
),
),
),
);
}
}The Scaffold starts with AppBar, that displays the back button when we navigate to another page. In addition, it allows us to use Drawer, Title, etc.
At the same time, at the bottom, beyond the body property it allows us to use BottomNavigationBar, FloatingActionButton, etc.
The body property of Scaffold uses here GestureDetector widget so that we can use onTap method to navigate to the first page.
If we tap the image, we can navigate to the first page, which again navigates to the second page.
This is one of the greatest advantage of MaterialApp that we can navigate from one screen to the other quite easily.
Let us take a look at the first page widget, whose AppBar automatically creates the back button to navigate back to the home page again.
Furthermore, we can tap the image and as we’ve reached here from the home page, we can navigate to the second page from here.
The following code snippet gives us an idea of how we can follow the material design principles.
import 'package:flutter/material.dart';
import 'second_page.dart';
class FirstPage extends StatelessWidget {
const FirstPage({Key? key}) : super(key: key);
static const routename = '/first';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('First Page'),
),
body: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const SecondPage()),
);
},
child: Container(
margin: const EdgeInsets.all(10.0),
padding: const EdgeInsets.all(10.0),
child: ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(15.0),
topRight: Radius.circular(15.0),
bottomLeft: Radius.circular(15.0),
bottomRight: Radius.circular(15.0),
),
child: Image.network(
'https://cdn.pixabay.com/photo/2021/07/12/19/43/swans-6421355_960_720.jpg'),
),
),
),
);
}
}To sum up, we’ve learned many basic concepts of material design that starts from WidgetsApp. After that MaterialApp widget along with with the Scaffold widget implement material design principles.
Subsequently, we’ve learned how MaterialApp implements one of the primary roles of material design principles, which is nothing but Navigation.
What Next?
Books at Leanpub Books in Apress My books at Amazon GitHub repository Technical blog Twitter
Leave a Reply