#Flutter: Intro to basic widgets in Flutter

Ahoy, after learning something about Object-oriented Programming, let's get started with some cool stuff in Flutter.

Open your Code-editors or open Dartpad

Let's go!

So first of all what is widgets ??

an application, or a component of an interface, that enables us to perform some function, right?

But what are widgets doing inside Flutter?

One of the main things that you quickly realize, while using Flutter is that nearly everything is a widget.

That also means there's so much built all ready to use in Flutter, you don't need to build some function from scratch.

Though for building your application, you have to start from scratch.

Let's begin with some of the basic things you should know before starting coding in Flutter.

Some Important classes.

Scaffold:

The Scaffold is a widget in Flutter used to implements the basic material design visual layout structure.

This widget can occupy the whole device screen.

we can say that it is mainly responsible for creating a base to the app screen on which the child widgets hold on and render on the screen.

It provides many widgets or APIs for showing Drawer, SnackBar, BottomNavigationBar, AppBar, FloatingActionButton, and many more.

The Scaffold class is a shortcut to set up the look and design of our app that allows us not to build the individual visual elements manually.

It saves our time to write more code for the look and feel of the app.

The following are the constructor and properties of the Scaffold widget class.

const Scaffold({  
    Key? key,
    this.appBar,
    this.body,
    this.floatingActionButton,
    this.floatingActionButtonLocation,
    this.floatingActionButtonAnimator,
    this.persistentFooterButtons,
    this.drawer,
    this.onDrawerChanged,
    this.endDrawer,
    this.onEndDrawerChanged,
    this.bottomNavigationBar,
    this.bottomSheet,
    this.backgroundColor,
    this.resizeToAvoidBottomInset,
    this.primary = true,
    this.drawerDragStartBehavior = DragStartBehavior.start,
    this.extendBody = false,
    this.extendBodyBehindAppBar = false,
    this.drawerScrimColor,
    this.drawerEdgeDragWidth,
    this.drawerEnableOpenDragGesture = true,
    this.endDrawerEnableOpenDragGesture = true,
    this.restorationId,
})

Cool huh?

I know it seems overwhelming XD

No worries, we will be dealing with most of them in our future articles.

Be relaxed, let's check them one by one.

appBar

First of all what is appBar ??

Got it?

Let's code our AppBar.

appBar: AppBar(
        title: Text("My First App),
         )

Yaa, that's it!

By the way, this should be written inside the brackets of the scaffold.

Please refer to the last part of this article. About the placement of your code.

Body

As the name suggests, it's the actual body of your application, where most of our meaningful code is going to be written.

body: Center(
          child: MyWidget(),
                      )

MyWidget:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Buffer Overflow', style: Theme.of(context).textTheme.headline4);
  }
}

Ahh, I won't bore you. Let's code something!

So What are we going to code?

Before coding let's first determine what our app is going to do?

Umm, let's code a useless app. It will help you understand how things work and how you can easily build your application.

My next question is how our app will look like?

I prefer using Figma, you may use Adobe XD.

It's your choice :)

My design:

I know it's not that good-looking, but let's just code this design into an Application.

So what we are going to learn after building this page?

Theming

What is a primary swatch

How to route our pages?

So, As we can see it's an Application that has a login page.

First Step:

Follow the steps listed in this article, which will build a basic application base.

Change the directory and get into the lib folder and open main.dart file.

Let's just remove all the comments written.

Remove this part too

int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

This too

floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),

And finally, remove this too.

 Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),

Here's how my main.dart looks

import 'package:firstapp/pages/login_Page.dart';
import 'package:flutter/material.dart';
import 'pages/homepage.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.deepOrange,
        brightness: Brightness.dark,
      ),
      // darkTheme: ThemeData(brightness: Brightness.dark),
      // home: MyHomePage(title: 'Flutter Demo Home Page'),
      routes: {
        "/": (context) => MyHomePage(title: "Gulshan"),
        "/loginPage": (context) => LoginPage(),
      },
    );
  }
}

By seeing the above code, we can see that the widget is returning a Material app.

Please if you are not getting some of the things, please refer to my previous articles on Flutter.

It will surely give you an idea of some of the important concepts used in programming.

Coming back to the Material app, we can see that it has some Title and some theme, which takes Theme data as its input.

You can think of this as, char name

This variable name can only take character as an input, and one can't assign any number to it.

Though it is possible to assign a number to a variable of type char you have to first convert that number into a type string.

Didn't Understand?

No Worries.

There's an Argument named PrimarySwatch and has a value as Colors.deepOrange.

PrimaruSwatch: Colors.deepOrange

Please refer to our design, one can see that the app bar of our design has something like a violet color.

But because of this value Colors.deepOrange, Our application will appear as deep orange in color.

I recommend you to play with colors and choose the color of your choice.

The next line of code says something about brightness, it's nothing but it is asking you that will your application be in dark or light mode?

For instance, use light mode as that deep orange won't be appearing to you, as the dark mode will override everything into the dark theme.

Moving to the next line we can see a commented line

home: MyHomePage(title: 'Flutter Demo Home Page'),

This will route our application to this class named MyHomePage

Therefore, the first page for our application is defined in this class named MyHomePage.

But why I commented this out??

I wanna introduce you to routes in Flutter, it will even help you build a web app based on Flutter.

Moving to a piece of code, we can see

routes: {
        "/": (context) => MyHomePage(title: "This is title"),
        "/loginPage": (context) => LoginPage(),
      },

Here / means the same as home in the above code. Yaa, it's the same thing.

But we want our login page to be displayed first naa?

let's change the code in some way that it will show the login page as it's the homepage for our application.

I want you to change this piece of code on your own :)

hint: Replace MyHomepage(title: ".....") with LoginPage()

So now I think we are done with our main.dart file.

Are you excited about coding our login page??

I know you are bored till now, I just want you to create a folder named pages inside the lib folder and create a file named login.dart inside the pages folder.

---

We are done, for now, we learned about theming, and how to route our application to a specific page in this article.

I hope you understood everything I specified in this article. In the next article, we will be coding our login page.

If you have some doubts, please head over to our Telegram group. I will be more than happy to help you.

There's saying

if you want to impress people make things complicated, If you want to help people, keep it simple

I wanna help you and I will be there for you.

Stay home, stay safe.

Cya :)