Tuesday, May 25, 2021

Design and Code Your First Flutter App

Design and Code Your First Flutter App

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 get started with your first app developed on Flutter. 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 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 develop Flutter apps faster.

Once it is installed, you are ready to start your project.

Build First Flutter App

After getting started with the Flutter and setting up the SDK and IDE, you have to create a project.

Open Android Studio and create a new Flutter project.

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 put everything and press Next and then Finish, the 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. 

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 at the top of the code, we will see this line:

import 'package:flutter/material.dart';

The starter app uses Material Design. Material Design 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:

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.

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

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 all that Flutter can do. 

Here is an example:

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:

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 customs 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:

  1. set a font as the default
  2. 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:

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 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 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:

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.

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 acheive this look:

Conclusions

Flutter has simplified the process of app development with its widgets and easy to use interface. There are endless possibilities when it comes to adding and modifying elements to 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 in a great app developer.


Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)