Flutter is Google's SDK for crafting beautiful, fast user experiences for mobile, web, and desktop from a single codebase. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.
Prerequisite: Experience in any programming language which taught you OOP.
Before starting up, please note that you should have min. 8GB of ram in your laptop or computer for coding your Flutter application smoothly.
If you don't have a PC with the required specifications
I would recommend using Dartpad.
DartPad is a free, open-source online editor to help developers learn about Dart and Flutter.
Now after installing Flutter, let's install a text editor, which works best with Flutter.
I recommend using Android Studio, Visual Studio Code, or Emacs
And XCODE for mac users.
Please install a Flutter extension in your respective code Editor.
This will help you code faster in Flutter
After setting up your favourite editor for Flutter.
Run:
flutter doctor
The output should look like this,
This indicates that we are all set for coding our flutter application.
If there's some error, please fix it or drop a comment below, I will be happy to help you in the process.
So now, after setting up everything, let's jump in the terminal and fire,
flutter create yourprojectname
Please note: The name should be all lowercase, with underscores to separate words, just_likethis. Use only basic Latin letters and Arabic digits: [a-z0-9]. Also, make sure the name is a valid Dart identifier—that it doesn’t start with digits and isn’t a reserved word.
Try to pick a name that is clear, terse, and not already in use. A quick search of packages on the pub.dev site to make sure that nothing else is using your name is recommended.
If you are a windows user, press
ctrl+shift+p
This will open the command platelet for you in vs code. then search an entry that says, create a Flutter application
Now let's jump into your Flutter project.
The things we will be focusing on are the main.dart file inside the lib folder and pubsec.yaml file.
The main.dart contains all our required Flutter code, which we will be working on.
and pubsec.yaml contains the list of assets and the dependencies we will be working on.
Now let`s run the command
flutter run
For running the sample code in main.dart to build a counter application in your device.
To use your physical Android device, Turn on USB Debugging in Developer mode.
Now run the above command again, if you didn't and you will see your first Flutter application running on your device in debug mode.
Here's how it will look like,
Let's go through the code written in main.dart file.
The first line of code
import 'package:flutter/material.dart';
Imports the material code for using the widgets defined in it.
void main() {
runApp(MyApp());
}
This is the main function, And it is the entry point of our program. It is the point at which the execution of a program is started. When a program is executed, the execution control goes directly to the main() function.
And here it is running the MyApp() class defined.
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application
primarySwatch: Colors.blue,
//You can play with the name of the color you like :)
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
This class, I.e. MyApp is a stateless widget,
Stateless Widgets are those widgets whose state can not be altered once they are built.
@override
The
@overrideannotation expresses the intent that a declaration should override an interface method, something which is not visible from the declaration itself.
The meaning of Override is
to use your authority to reject somebody’s decision, order, etc.
If you didn't understand the use of override, It's okay for now It will get clear when you will start writing your Flutter application.
Let's jump into our next part of the code,
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
This widget is the home page of your application. It is stateful, meaning that it has a State object (defined below) that contains fields that affect how it looks.
This class is the configuration for the state. It holds the values (in this case the title) provided by the parent (in this case the App widget) and used by the build method of the State. Fields in a Widget subclass are always marked "final".
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
// This call to setState tells the Flutter framework that something has
// changed in this State, which causes it to rerun the build method below
// so that the display can reflect the updated values. If we changed
// _counter without calling setState(), then the build method would not be
// called again, and so nothing would appear to happen.
_counter++;
});
}
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Column(
// Column is also a layout widget. It takes a list of children and
// arranges them vertically. By default, it sizes itself to fit its
// children horizontally, and tries to be as tall as its parent.
//
// Invoke "debug painting" (press "p" in the console, choose the
// "Toggle Debug Paint" action from the Flutter Inspector in Android
// Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
// to see the wireframe for each widget.
//
// Column has various properties to control how it sizes itself and
// how it positions its children. Here we use mainAxisAlignment to
// center the children vertically; the main axis here is the vertical
// axis because Columns are vertical (the cross axis would be
// horizontal).
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
//Variables which are declared in this class can be accessed by $ symbol
//while in quotes
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
This is the extended part of the class MyHomePage as you can see that the ending line of the class MyHomePage says to override and create a state _MyHomePageState.
The rest of the code is properly being explained through comments, Please do read and use them efficiently in your code too.
I would like to suggest you play with this existing code so that one can understand the working of this code.
I will continue this flutter series until I go mad XD
In the next post, I will be building a Flutter application, for teaching you other components and terms related to Flutter development.
Until then, stay home stay safe.
Cya ;-)