flutter-tutorial

Flutter – Basic Application Example

Flutter is an open source framework for developing high-quality, high-performance mobile applications for Android and iOS devices. It gives you a simple, powerful, efficient, and easy-to-understand SDK for writing mobile apps in Dart, Google’s own programming language. This lesson covers the fundamentals of the Flutter framework, as well as the installation of the Flutter SDK, the setup of Android Studio to develop Flutter-based apps, the architecture of the Flutter framework, and the development of various types of mobile apps utilising the Flutter framework.

Let us create a simple Flutter application to understand the basics of creating a flutter application in the Android Studio.

Step 1 − Open Android Studio

Step 2 − Create Flutter Project. For this, click File → New → New Flutter Project

Step 3 − Select Flutter Application. For this, select Flutter Application and click Next.

Step 4 − Configure the application as below and click Next.

Project name: hello_app
Flutter SDK Path: <path_to_flutter_sdk>
Project Location: <path_to_project_folder>
Description: Flutter based hello world application

Step 5 − Configure Project.

Set the company domain as flutterapp.yourname.com and click Finish.

Step 6 − Enter Company domain.

Android Studio creates a fully working flutter application with minimal functionality. Let us check the structure of the application and then, change the code to do our task.

Various components of the structure of the application are explained here −

  • android − Auto generated source code to create android application
  • ios − Auto generated source code to create ios application
  • lib − Main folder containing Dart code written using flutter framework
  • ib/main.dart − Entry point of the Flutter application
  • test − Folder containing Dart code to test the flutter application
  • test/widget_test.dart − Sample code
  • .gitignore − Git version control file
  • .metadata − auto generated by the flutter tools
  • .packages − auto generated to track the flutter packages
  • .iml − project file used by Android studio
  • pubspec.yaml − Used by Pub, Flutter package manager
  • pubspec.lock − Auto generated by the Flutter package manager, Pub
  • README.md − Project description file written in Markdown format

Step 7 − Replace the dart code in the lib/main.dart file with the below code −

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Learn Code Zone',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Home page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(this.title),
      ),
      body: Center(
          child: Text(
        'Hello World',
      )),
    );
  }
}

Step 9 − Finally, the output of the application is as follows −

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published.