Android IOS Hello word flutter | Programming with flutter

Flutter :

Hello welcome to the new flutter programming. Every beginning of learning a new language is with a “Hello World” so lets start flutter with the same scenario.

Now we got a new tool called flutter which makes us not only android but even ios developer too isn’t that great. Ya ur right its just not flutter previously there were many tools framing this purpose but flutter seems a bit different from them.

Is flutter that useful 🙂

The main difference is observed as you progress int his version of programming. Ok then lets start…….

Now we generally start designing our layout file first to get an idea of what to be there and how to get started but now in this android app we can directly start coding hello word without a layout file(also possible in native codingggg:) ) .

Does my experience count ?

We are using Android Studio for developing our first flutter app so it clarifies that you can use your previous programming experience of your android, not only android flutter can be easily learnt using any of your programming skills like

1. Android developer
2. Ios developer
3. Web developer
4. React native developer
5. Xamarin developer

don’t believe me  ok have a look

Initially we need not add any libraries or so called dependency’s .

Before going any further have a look at this tutorial to optimize flutter with android studio –> Introduction to flutter

How to code ?

A file name main.dart is already created when you create a project for now lets use it.

main.dart

Just import material.dart package as below

import 'package:flutter/material.dart';

this one line will fetch all your resources as we already know this lets skip..

As a so called programmer we already know every program starts with void main if i am wrong correct me in comment section 🙂

in java do you remember our  main method declaration

public static void main (String[] args){

}

in flutter we code it like

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

ya in one line as java but observe declaration is much simpler here right with the use of  “=>” and again doubt ? ask me in comment section.

Let’s get to know what that line means

Here MyApp is our class name want to see it scroll down

1) Most important make sure you use runApp( ) method if not you can compile code but you cant get any output.

Don’t believe try it and let me know.

2) Sample class declaration

class MyApp {
}

Extend your class with StatelessWidget

extends StatelessWidget

your code will be like

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return null;
  }
}

Now return Material App instead of null

return new MaterialApp( declartions.. )

add a title for your app

title: 'Flutter',

declare a home

In home block using Scaffold add app bar. You have many other features just a sample

app bar may have a title like

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

then you may select brightness level like

brightness: Brightness.dark,

or

brightness: Brightness.light,

Next comes body inside home

This is the place where your main app declarations  goes on

body: const Center(
  child: const Text('Hello World'),
),

You can notice

), // AppBar

), // Scaffold

), // MaterialApp

these will clearly show you the end of that particular block or section of code.

What is Dart ???

If you don’t know about dart please let me know in comment section below also in my youtube channel so i can make a tutorial on it if required.

Flutter code :

import 'package:flutter/material.dart';

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


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: const Text('Welcome to Flutter'),
          brightness: Brightness.light,
        ),
        body: const Center(
          child: const Text('Hello World'),
        ),
      ),
    );
  }
}

Query :

If you have any query on this information on flutter do let us know in the comment section below.

Like It

If you like my tutorial

1)  like

2) share

and most subscribe this tutorial for more interesting updates 🙂