Flutter : Stepping Into The Domain

Flutter is an open-source UI software development kit created by Google. It is used to develop applications for Android, iOS, Windows, Mac, Linux, Google Fuchsia and the web.

Installation

Before you go ahead with this we strongly recommend you download Teamviewer as your mentor can then help you remotely debug whatever issue you are facing.

Windows

To setup Flutter on Windows, follow these official guidelines

MacOS

To setup Flutter on MacOS, follow these official guidelines

Linux

To setup Flutter on Linux, follow these official guidelines

Flutter Doctor

Flutter comes up with an awesome command line utility to check if your machine is set up for local development. Flutter has Flutter Doctor command

---

---

Flutter Doctor for Windows Doesn't need XCode. Refer to Installation above

It help guide developers through setting up the local development environment for both iOS and Android. Flutter Doctor inspects which tools are installed on the local machine and which tools need to be configured. Once the Flutter Doctor command is happy, we can carry on creating a new Flutter app.

Editor

So for your default editor , we recommend you guys to use VSCode , as its a lightweight IDE compared to Android Studio.

Project Structure

Let’s first see what’s in the project generated by the Flutter framework:

---

---

• lib/ - just as pub (Dart’s package manager), all the code will be here. All files which help you render the app will have a .dart extension
• lib/main.dart - In the main.dart file, you create widgets and develop Flutter apps as per your needs
• pubspec.yaml - stores a list of packages that are required to run the application, just like package.json does it. You should remember that in Flutter projects you cannot use pub directly, but instead, you will use the Flutter command: flutter pub get <package_name>. If using VSCode, pubspec.yaml page has a download button on the side which runs the above command for all packages you need
• ios/ & android/ - the code specific for each platform, including app icons and settings where you set what permissions you’ll need for your application (like access to location, Bluetooth). So to switch app icons or to allow some special features like ARCore to run on your device, you need to changes specifics here.

Adding assets to your application

First we need to make an assets folder and add the necessary images or fonts that we need to import

Then we need to add that assets under the pubsec.yaml

Adding Packages

If we need to add features to our application we need to use packages , for example we need to launch urls from our application then we can use this package. Url Launcher

First we need to add that package in our pubsec.yaml file

Then we need to import that package in our code

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

Widgets

Now that you have installed flutter and are beginning to develop, We want to introduce you to what exactly widgets are, in layman's term everything you use or interact with or even see on an app is a Widget.

Widget only one requirement: its method must returns other Widgets. The only exception to this rule are low-level widgets like 'Text' that return primitive types (Strings or numbers, usually.)

This may sound intimidating at first, but you'll get along with the flow, Easiest way to visualize how Widgets work is to think of it as a complex tool with gears and levers and pulleys, basically built of simpler machines. When we build an app, we return a MaterialApp Widget which encloses other Widgets

Widget build(BuildContext buildcontext){ //Here you return a Widget from the build function and the parameter it receives is a BuildContext object

return MaterialApp(                       // MaterialApp takes in a few parameters, as they are default parameters(Parameters with predefined values), if you wish to update any such parameter you explicitly mention the parameter and its value
      title: 'Welcome to Flutter',        // title here takes in a String input, hence "title : 'Welcome to Flutter'"
      home: Scaffold(                     // home takes in a Widget, for which we send a Scaffold Widget. Note: Scaffold holds all contents you'll be showing on your app
        appBar: AppBar(                   // appBar is a parameter of Scaffold which usually is provided with a Widget called AppBar. AppBar is the top bar you see in most apps which contain the menu and the search options
          title: Text('Hello World'),     // title again takes a Widget for which we provide a Text Widget. This provides for the title on the AppBar
        ),
        body: Center(                     // body contains the main content of your App which also takes in Widget 
          child: Container(
             child: Text('First App')
          )
        )
      )
 );
}

If you ever wanna see what parameters are there for a specific widget press Ctrl+Space on VS-Code it shows you all the parameters for any Widget

If you ever wanna know which Widgets to use refer to Flutter's Widget Catalog

Flutter has its own youtube Channel as well which on which you can view videos for the Widgets you want to use.

Link : https://www.youtube.com/channel/UCwXdFgeE9KYzlDdR7TG9cMw

Stateless and Stateful Widgets

Now we know how easy it is to use widgets. The next logical step would be to create our widgets. There are basically two kinds of widgets. They are called stateless and stateful widgets.

“Stateless” doesn’t mean they don’t have a state at all. Widgets is a Dart class, that can be declared with properties. But changing those properties in a stateless widget won’t affect what has already been rendered. Updating properties of a stateful widget will trigger life cycle hooks and render its content using the new state. We’ll start with Stateless widgets as they seem to be a bit easier.

Stateless Widgets

To create one, we need:

1. A name for the new class
2. To extend our class from StatelessWidget.
3. Implement the build() method, that will receive one argument of type BuildContext and return a result of type Widget.

I have nothing more to add about Stateless widgets. They are simple.

Refer to this article to know more

Stateful Widgets

The following is the basic syntax of any Stateful Widget class.

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Container(color: const Color(0xFFFFE306));
  }
}

So, here first, we have declared our main class called MyApp which extends the StatefulWidget class. That means now we have to define the generic method called createState() in that class which will return one another class which extends the generic class State

Refer to this article to know more.