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
- Android developer
- Ios developer
- Web developer
- React native developer
- 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 🙂