Mobile App Development using Flutter

Published on 18 May 2022. Written by Dineshkumar E

Flutter is an open-source software development kit made by google which is employed to create a mobile app for both android and ios. Flutter uses Dart an object-oriented programming language which is in itself simple to learn.

In this mobile app development project, you will build a mobile application that will create an infinite, lazily loaded list of random words. By working on this project you will practically learn about:

Read more..

SLNOTE

• State management
• How to launch an app on the play store
• Building apps with state
• Data programming language

SLLATEST
Advantages of Flutter

• Flutter uses ready-made widgets that make the UI coding faster. Also in flutter the widgets are organized in a tree which is convenient for rendering.
• You no need any previous mobile development experience to use flutter. It uses Dart programming language which makes it easy for beginners to start.
• Flutter uses Ahead of Time during app release and Just in Time compilation during app development to make the development process fast.
• Hot reload functionality - This tool is already embedded in Flutter’s architecture, which helps to visualise the changes realtime.
• Internationalization - Flutter has built-in dates, units of measure, currencies, and layout options for languages that are written from right to left apart from this it also supports 24 languages.
• Perfect for Minimum Viable Product - Since Flutter is a cross-platform SDK you can easily develop a mobile application to show your product to your investors that looks natural on both android and ios platforms.

Project Implementation

1. Install the latest version of Android Studio and Now add flutter plugin.

2. Goto File>settings>plugins. In Browse, repositories select Flutter plug-in and install

3. It will prompt to install dart plugin, Click yes and install dart.

4. Start by creating a new project for flutter File>New>New Flutter project

5. Put a name to your project and mention a path for the SDK and click on Install SDK

6. Select the package name and If necessary add support for Swift and Kotlin. This is the basic things required to start working on a project.

7. Let’s start by creating a simple flutter app which says “Hello world”. Use the following code to make the app:

“import 'package: flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Welcome to Flutter',

      home: Scaffold(

        appBar: AppBar(

          title: const Text('Welcome to Flutter'),

        ),

        body: const Center(

          child: const Text('Hello World'),

        ),

      ),

    );

  }

}”

8. Type the required code and run it which forms a Material app.

9. (=>) notion used for one-line functions

10. Now it extends StatelessWidget by making the whole app as a widget. In flutter, everything is a widget including, layout, alignment and padding.

11. Scaffold widget gives a body property which contains the widget tree, a default app bar and a title for the home screen.

12. Centre widget aligns the widget subtree to the centre of the screen.

13. Use an external package english_words to add some English words

14. Let’s add a stateful widget - it is an immutable widget, their properties cannot change.

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    final WordPair wordPair = WordPair.random();  // Delete this line.

 

    return MaterialApp(

      title: 'Welcome to Flutter',

      home: Scaffold(

        appBar: AppBar(

          title: Text('Welcome to Flutter'),

        ),

        body: Center(

          //child: Text(wordPair.asPascalCase), // Change this line to...

          child: RandomWords(),                 // ... this line.

        ),

      ),

    );

  }

}

15. After adding StatefulWidget and RandomWords creates a State class - RandomWordsState.

16. Now add the build() method to RandomWordsState.

17. Create an infinite scrolling ListView by expanding the RandomWordsState. The list will grow infinitely, If the user scrolls. ListView from builder factory constructor lets you create a lazily load list view.

SLDYK
Kit required to develop Mobile App Development using Flutter:

• Flutter

Technologies you will learn by working on Mobile App Development using Flutter:

• android

Any Questions?