Designing an app with Flutter is quite simple, and the process is easy to understand even if you are a beginner.
This guide will help you build your first Flutter app. It will teach you some of the core UI and design elements that come together to make an app, like font, theme, orientation, snackbar, and drawer.
Getting Started With Flutter
Getting started with Flutter doesn’t require you to have extensive app-developing experience. There are several Flutter tutorials to guide you through the complete process of creating an app here.
What makes Flutter programming even simpler is that all apps are written in the Dart language. So you also don’t need to know the OS-specific programming languages like Swift or Java.
To get started, you will have to download and install the Flutter SDK. Next, download and install Android Studio.
If you don’t have Android Studio, you can use any other IDE to develop a Flutter app. We are using Android Studio because it has many features that help you develop Flutter apps faster.
Once it's installed, you are ready to start your project.
Build Your First Flutter App
After getting started with Flutter and setting up the SDK and IDE, you have to create a project.
Open Android Studio and create a new Flutter project.
.png)
.png)
.png)
Next, you have to give your project a name, select its Flutter SDK path, set the location of the project, and click Next. Now enter the project name. We would like to name it my design.
After you add everything and press Next and then Finish, Android Studio will set you up with some starter code and launch the project. Here's what the starter code looks like:
// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to My Design',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: Text('Hello World'),
),
),
);
}
}
Now you can run the project to see how the app looks.
.png)
.png)
.png)
Great! This was the first step to building your first Flutter app. So far it is a simple app with a top bar and a button in the middle.
The Material Design Package
Now, if we go back to the top of the code, we will see this line:
import 'package:flutter/material.dart';
The starter app uses Material Design, which is a design system created by Google. With Flutter, it is easy to create a Material Design app—we get to tap into a lot of pre-built material components and widgets.
To use Material Design in Flutter, import the material.dart package. These widgets take care of everything from font to alignment to theme. Of course, you don't have to use Material Design—the Flutter framework is designed in such a way that it creates layers of objects, and every part of the framework level is optional and replaceable.
Let's customize our app. We'll start with the text widgets.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: BodyWidget(),
),
);
}
}
class BodyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.center,
child: Text(
'Hello, Max! How are you?',
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: const TextStyle(fontWeight: FontWeight.bold),
),
);
}
}
The result will look like this:
.png)
.png)
.png)
The text widget will display the text in the default font, which will break into lines based on the layout. However, you can style the text using the Text.rich constructor. It will show a paragraph with differently styled text.
.png)
.png)
.png)
Here is the rich text code for reference:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: BodyWidget(),
),
);
}
}
class BodyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.center,
child: Text.rich(
TextSpan(
text: 'Hello', // default text style
children: <TextSpan>[
TextSpan(text: ' beautiful ', style: TextStyle(fontStyle: FontStyle.italic)),
TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold)),
],
),
),
);
}
}
(An extra tip: If you want to make your text react to touch events, use a Gesture Detector widget and wrap the text in that. I'll explain this in a follow-up post.)
Design Elements for a Flutter App
Here are the major design elements you might want to use in your first Flutter app:
Themes
The Flutter UI is all about allowing people to create apps that are appealing and attractive. For starters, Flutter will give your app the default theme if no other theme is selected.
Now, you can play with the code and test everything that Flutter can do.
Here is an example:
.png)
.png)
.png)
And its code should look like this:
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final appName = 'Custom Themes';
return MaterialApp(
title: appName,
theme: ThemeData(
// Define the default brightness and colors.
brightness: Brightness.dark,
primaryColor: Colors.lightBlue[800],
accentColor: Colors.cyan[600],
// Define the default font family.
fontFamily: 'Georgia',
// Define the default TextTheme. Use this to specify the default
// text styling for headlines, titles, bodies of text, and more.
textTheme: TextTheme(
headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
),
),
home: MyHomePage(
title: appName,
),
);
}
}
class MyHomePage extends StatelessWidget {
final String title;
MyHomePage({Key? key, required this.title}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Container(
color: Theme.of(context).accentColor,
child: Text(
'Text with a background color',
style: Theme.of(context).textTheme.headline6,
),
),
),
);
}
}
Here is another example of how you can change the color of the background and add different elements to improve your app:
.png)
.png)
.png)
Here is how its code goes:
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final appName = 'Custom Themes';
return MaterialApp(
title: appName,
home: MyHomePage(
title: appName,
),
);
}
}
class MyHomePage extends StatelessWidget {
final String title;
MyHomePage({Key? key, required this.title}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Theme(
// Create a unique theme with "ThemeData"
data: ThemeData(
accentColor: Colors.yellow,
),
child: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
),
),
);
}
}
Fonts
Flutter offers several custom fonts that you can apply to your app. These fonts can be applied to the entire app or to a specific widget.
To use custom fonts, you can import them into Flutter. Use this code to import the font of your choice:
awesome_app/
fonts/
Font-Regular.ttf
Font-Italic.ttf
Font-Regular.ttf
Font-Bold.ttf
After importing the fonts, you have to declare the font in the pubspec by including a font definition in the pubspec.yaml file.
flutter:
fonts:
- family: Raleway
fonts:
- asset: fonts/Raleway-Regular.ttf
- asset: fonts/Raleway-Italic.ttf
style: italic
- family: RobotoMono
fonts:
- asset: fonts/RobotoMono-Regular.ttf
- asset: fonts/RobotoMono-Bold.ttf
weight: 700
You can download other free fonts from Google.
After this, you have two options:
- set a font as the default
- use a font in a specific widget
In the following code, you can see examples of how to do each of these options.
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Custom Fonts',
// Set Raleway as the default app font.
theme: ThemeData(fontFamily: 'Raleway'),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
// The AppBar uses the app-default Raleway font.
appBar: AppBar(title: Text('Custom Fonts')),
body: Center(
// This Text widget uses the RobotoMono font.
child: Text(
'Roboto Mono sample',
style: TextStyle(fontFamily: 'RobotoMono'),
),
),
);
}
}
Here's what your app will look like:
.png)
.png)
.png)
This will apply the Roboto Mono font only to the text widget, while Raleway stays the default font of the app.
User Interface and Overall Layout
Flutter allows you to build different layouts according to the orientation of users’ devices. For example, you can build a grid view list with two columns in portrait mode and three in landscape mode.
First, create a grid with two columns.
GridView.count( // A list with 2 columns crossAxisCount: 2, // ... );
Now, use the OrientationBuilder widget to adapt the layout based on the device’s orientation.
OrientationBuilder(
builder: (context, orientation) {
return GridView.count(
// Create a grid with 2 columns in portrait mode,
// or 3 columns in landscape mode.
crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
);
},
);
The layout will now have three columns in the horizontal orientation as compared to two in the vertical orientation. This is the complete code:
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final appTitle = 'Orientation Demo';
return MaterialApp(
title: appTitle,
home: OrientationList(
title: appTitle,
),
);
}
}
class OrientationList extends StatelessWidget {
final String title;
OrientationList({Key? key, required this.title}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(title)),
body: OrientationBuilder(
builder: (context, orientation) {
return GridView.count(
// Create a grid with 2 columns in portrait mode, or 3 columns in
// landscape mode.
crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
// Generate 100 widgets that display their index in the List.
children: List.generate(100, (index) {
return Center(
child: Text(
'Item $index',
style: Theme.of(context).textTheme.bodyText1,
),
);
}),
);
},
),
);
}
}
And here is what your app will look like:
.png)
.png)
.png)
Adding a Drawer
You can also add drawers to display additional information on your application.
The drawer is added by using a drawer widget, combined with a scaffold. The drawer is wrapped in the scaffold widget.
.png)
.png)
.png)
For an example of how to add a drawer in the scaffold and add content to the drawer, look at the following code:
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
final appTitle = 'Drawer Demo';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: appTitle,
home: Scaffold(
body: MyHomePage(title: appTitle)),
);
}
}
class MyHomePage extends StatelessWidget {
final String title;
MyHomePage({Key? key, required this.title}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(title)),
body: Center(child: Text('My Page!')),
drawer: Drawer(
// Add a ListView to the drawer. This ensures the user can scroll
// through the options in the drawer if there isn't enough vertical
// space to fit everything.
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text('Drawer Header'),
),
ListTile(
title: Text('Item 1'),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
),
],
),
),
);
}
}
The above code will achieve this look:
.png)
.png)
.png)
Conclusion
Flutter has simplified the process of app development with its widgets and its easy-to-use interface. There are endless possibilities when it comes to adding and modifying elements for your Flutter app. This guide has covered some key elements that are an integral part of every app's design.
So experiment a lot because only testing and practicing will turn you into a great app developer.
.jpg)
.jpg)
