Creating Your Debut App with Flutter & Dart

Flutter is an open-source software development kit which is developed by Google. This is used to develop applications on Android, iOS, Mac, Linux, Windows, and web. This has the support of Dart Programming Language which is used to develop applications in different platforms. Likewise, Android uses Java & kotlin, iOS uses C++ & Swift.

Flutter is quite an easy language compared to Android and iOS native programming languages. It uses a clear cut code that makes developers understand it well enough.

Flutter Widgets

Flutter has two types of common widgets to develop applications. One amongst them is Material Design Widgets and another one called Cupertino widgets. Material Design Widgets are applicable for all platforms such as Android, iOS and Web. Where Cupertino Widgets are specially used and designed for iOS applications. Here is the List of Flutter Widgets examples catalog,

Material Widgets

import 'package:flutter/material.dart'; 2 3 void main() => runApp(HelloWorldApp()); 4 5 class HelloWorldApp extends StatelessWidget { 6 @override 7 Widget build(BuildContext context) { 8 return MaterialApp( 9 title: 'Hello World App', 10 home: Scaffold( 11 appBar: AppBar( 12 title: Text('Hello World App'), 13 ), 14 body: Center( 15 child: Text('Hello World'), 16 ), 17 ), 18 ); 19 } 20 } 

This requires an import of material(dart extension) to access all functionalities and widgets in it. For creating a simple app we need to write and return Material App Widget to see the normal application output. This can be run on any platform.

Material Widgets

import 'package:flutter/cupertino.dart'; 2 3 void main() => runApp(HelloWorldApp()); 4 5 class HelloWorldApp extends StatelessWidget { 6 @override 7 Widget build(BuildContext context) { 8 return CupertinoApp( 9 title: 'Hello World App', 10 home: CupertinoPageScaffold( 11 child: CupertinoNavigationBar( 12 leading: Text('Hello World App'), 13 ), 14 ), 15 ); 16 } 17 } 

This requires an import of Cupertino(dart extension) to access all functionalities and widgets in it. For creating a simple app we need to write and return to the Cupertino App Widget to see the normal application output. This can be run only on iOS.

Little Brief about Stateless & Stateful widgets

Flutter mainly focuses on two widgets that can be extended like an inheritance concept, Stateless widget and Stateful widget. These both are used to develop applications either statically or dynamically.

class HelloWorldApp extends StatelessWidget {}

StatelessWidget is used to develop a static page(UI). These values cannot be changed at runtime. Users can simply develop a normal screen like Contact/About Us screens.

class HelloWorldApp extends StatefulWidget { @override MyAppState createState() => HelloWorldAppState(); } 

class HelloWorldAppState extends State {}

StatefulWidget is used to develop a dynamic page(UI). These values can be changed at runtime. Users can simply develop screens like Login/Registration screens. Stateful widget uses setState{()} method to change values dynamically.

How to run flutter app in VScode and how does it work

After writing all these pieces of code, flutter has to run this class. It provides a void main{runApp{HelloWorldApp()}} method to run the first class which we have created. This helps to run the app and show the first screen whichever class we have called in it.

main.dart file is the main priority class that flutter runs first. For running the app we need to write our above code in this file.

How do we run this app now? Simply go to the top side and click ‘Run’ it will show you a drop down and from that you can click ‘Run without Debugging’. If you want your app to debug first and run then click on ‘Start Debugging’. Firstly you should’ve a connected realtime device to your PC.

If you want to run as debug mode then you can use below commands

For Android you can use command:

flutter build apk --debug

For iOS you can use command:

flutter build ipa --debug

If you want to run as release mode then you can use below commands

For Android you can use command:

flutter build apk --release

For iOS you can use command:

flutter build ios --release

If a developer wants to create more screens then they can create files inside the “lib” folder where main.dart is present in the above picture.

Explanation about “pubspec.yaml” file(Most important in flutter)

As you can see in the above picture, there is a file called pubspec.yaml on the left side last second one. This is used to declare all the app information in it. When we deploy an application into playstore/appstore we need a version of our application, We can give it out in this file. Each update of an app needs to change version code & version of our application. Not only versions, but we can also add dependencies here.

If we want our application to work out of the scope, there will be a lot of dependencies available in “pub.dev”. We can use them here. If a developer wants to add images/videos/gifs/fonts etc then they need to declare the path of it in this pubspec.yaml file. This file plays a vital role in Flutter.

How to use Layouts in Flutter

Coming to the part of code flutter is quite easy compared with native codes. If you are an android developer then you would be using Linear Layout a lot for horizontal and vertical alignment of child widgets. Similarly in Flutter, for applying widgets line by line either horizontal or vertical we can easily do that with COLUMN and ROW widgets. Column widgets are used for vertical alignment of any of the widget inside it and Row widgets are used for horizontal alignment of widgets.These both widgets are most widely/commonly used in flutter. Each one takes a list of widgets inside it. We can even take child widgets as Row and Column inside them. These widgets are known as Layouts in flutter.

Child of column widgets are not scrollable by default. For that we should either use Listview widget or we can wrap column widget into SingleChildScrollView widget. Even Row child widgets are not scrollable, We need to wrap them in either any of the above methods. SingleChildScrollView is used to scroll all the child widgets.

Remember, If you want your child widgets to spread one by one in a horizontal axis then use Row Widget. To align widgets in vertical axis then use Column widget.

If you want to specify color,background color,size,padding,margin etc then flutter provides you in a simple way to call Container widget. This widget helps to control its child widget alignment in a proper way. If you find that your Column or Row widget is not covering the remaining space then you can use a special widget that flutter provides you is called ‘Expanded’. By wrapping any of the widget inside the Expanded widget then it automatically covers/occupies the available or remaining space around it.

No matter if you want to create a complex app to a simple app which has a widget to align next-by-next or by below then you should be using these Column and Row widgets.

Let me show you an example of how to use Row & Column

Row( crossAxisAlignment: CrossAxisAlignment.center, children: [ Expanded( child: Image.asset('images/picDemo.jpg'), ), Expanded( child: Text('Hello World App'), ), ], ); 

Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Image.asset('images/picDemo1.jpg'), Image.asset('images/picDemo2.jpg'), Image.asset('images/picDemo3.jpg'), Text('Hello World App'), ], ); 

How to use Container Widget

Let’s discuss the commonly used widget in flutter called Container. As I discussed above, This widget is commonly used in flutter similarly to our daily routine human activities. Container is used for padding,margin etc to align its child widgets in a proper way.Even it can be used for radius of corners. You can use Container to any of the widget to apply some styling theme to them. Simply just wrap this Container to any of the widgets you want. It is so simple to use and reliable. Container is even compiled without using any child widgets in it. You can just border the container and can apply stroke/solid colors to it. But the container is rarely used without any child widgets inside it. Beginners can easily be the experts of using this widget. It is a simple widget used in Flutter.

Without Child :

Center( child: Container( color: Colors.green, ), ); 

With Child :

Center( child: Container( color: Colors.green, child: Text("Hello World App"), ), ); 

Flutter is different from other app development frameworks for developing customized mobile apps because it does not use WebView or OEM widgets that come with Android and iOS devices. It uses its own high-performance rendering engine to draw widgets, create magnificent visuals and impressive UI.

Amar Infotech provides Flutter- Cross platform app development services using Google’s revolutionary framework - Flutter, Hire dedicated Flutter developers Now!