How to Design Dynamic Android and iOS Apps Using Flutter: Part 3

Flutter Code World

Well, readers, now activate the coding corner of your mind as in the third part of the Flutter series, we will be talking about the codes. It is said that to start a new journey of any programming language, it is better to start the learning journey of that programming language from the basic “Hello World” Code of that language. So, let’s start Flutter code journey from its Hello World Code.

import 'package:flutter/material.dart';

void main() => runApp(new MaterialApp(

  title: 'First Flutter App',

  home: MyApp(),

));

class MyApp extends StatelessWidget {

   // This widget is the root of your application.

@override

Widget build(BuildContext context) {

  return Scaffold(

   appBar: AppBar(

     title: Text('Demo App'),

   ),

   body: Center(

     child: Text('Hello World!'),

   ),

  );

 }

}

How to import the material. dart package; This predetermined file is used to give the look and feel of material design to the app. You can materialize the app with the help of widgets available in the package.

MaterialApp; This file consists of home, route etc as the boundaries.

StatelessWidget: This widget saves the value of parent widgets and uses the values in an application built in whenever they required.

Scaffold; This one widget works under the material app. It plays the role of the layout of the major material components. The material app can be built or run similar to the Android or iOS apps on the emulator or on a real device.

The syntax of Flutter & It’s Components

Well, as we have previously covered that Flutter runs on the Dart programming language. So, to get the better hang of this system, you have to study the different syntax and their components of the Flutter. Well, the flutter has numerous different syntax that we can not cover here. We only discuss a few important syntaxes and to know more Flutter syntax, you can visit the official website of the Flutter.

Widget

The Flutter is very easy to use and adopt language that person with the minimum knowledge of app development can learn it. And, this all because of the widgets as everything in Flutter is presented in the form of widgets. Widgets make the usage process of the Flutter easier for the beginners. The different types of widgets available in the Flutter are;

Text. This lets you design styled text in your application. The syntax of the text widget looks like this:

Text(

‘Hello World!’,

textAlign: TextAlign.center,

style: new TextStyle(fontStyle: FontStyle.italic),

)

Row & Column. With this widget you can create horizontal and vertical flexible layouts and blocks in your application. The syntax of this widget is like this :

Row(

 mainAxisAlignment: MainAxisAlignment.center,

 children: <Widget>[

   Icon(Icons.cake),

   Text(‘Happy Birthday!’)

 ],

)

Column(

  mainAxisAlignment: MainAxisAlignment.center,

  children: <Widget>[

    Icon(Icons.cake),

    Text(‘Happy Birthday!’)

 ],

Stack. Unlike row and columns widget, this widget lets you place widgets on top of the one another.

Container. With its properties of padding, margins, and various constraints, it lets you create a rectangular visual element for your application.

Stateful and stateless widgets. The widgets can be divided into two main categories, stateful and stateless widgets. You can pick any of the widget types according to your need. So, the basic differences between both the widgets are that stateless widgets do not change with the changing state. So, if you want to make a change to the content display in stateless widgets, then have to create a brand new widget. The example of both widgets are;

Stateless

class Demo extends StatelessWidget {

 const Demo({ Key key }) : super(key: key);

 @override

 Widget build(BuildContext context) {

   return new Column();

 }

}

Stateful

class Demo extends StatefulWidget {

 const Demo({ Key key }) : super(key: key);

 @override

 _DemoState createState() => new _DemoState();

}

class _DemoState extends State<Demo> {

  @override

  Widget build(BuildContext context) {

     return new Column();

  }

}

The other important syntax of the Flutter will be discussed in the next blog post. So, stay connected with us.

Send a Message