Learning FLUTTER

Material app:

this is a design library used for android ecosystem. This is basically a design guideline. The given below are the things included in Material App:

title:

describes the title of the flutter app.

home:

the home screen of the app. Like in the given example we are using the container

EVERYTHING IN FLUTETR IS A WIDGET, LIKE TIME WRITTEN ON THE UUPER LEFT CORNER, BATTERY AND WIFI ICONS IN THE UPPER RIGHT CORNERS ARE ALL WIDGETS WE ARE USING.

We can extract the widgets. For example I I want to extract the Material app as a widget, click on the 'MaterialApp', there will be small bulb icon, you can find the 'Extract Widget' option in the dropdown list.

As the widget is created you can copy paste it in your any other .dart file like I am pasting it in the 'app.dart' file. As you pasted you will find a bunch of errors on each line, the reason is that we have not imported the library yet. For this press ctrl+. (for windows) or cmd+. (for macOS) and click on the import library

'package:flutter/material.dart';

Do same for the file from where you copied the widget and click on the import library

'package:flutter_application_1/app/app.dart';

So lets breakdown what exactly widgets are.....

In Flutter, widgets are the basic building blocks of the user interface. Everything in Flutter, from simple elements like buttons and text to complex layouts and animations, is built using widgets. Widgets in Flutter are lightweight and reusable components that represent a part of the user interface.

Stateless Widgets:
- These are immutable widgets, meaning their properties cannot change once they are set.
- Stateless widgets are used for UI elements that don't change during the lifetime of the widget.
Stateful Widgets:
- These widgets are mutable and can change dynamically in response to user interactions or other factors.
- Stateful widgets are defined by extending the StatefulWidget class and creating a corresponding State class that holds the mutable state.

Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Usama Jay',
      home: Container(
        color: Colors.indigo,
      )
    );
  }

In the above code you can see there is a build method. What does this method do? So basically this method is used in both stateless and stateful widgets. We do rendering work in this method, meaning what we write in this method is rendered on the screen.

So basically in the above directory section I have divided the directory in the different sections and used the widgets to access the part of code in the other file directories. For example I have created a 'views' folder and then created a file named 'home_views.dart' and copied the given code from the 'app.dart' file to the 'home_views.dart' file for not messing up the app.dart file.

import 'package:flutter/material.dart';

class HomeView extends StatelessWidget {
  const HomeView({super.key});

  @override
  Widget build(BuildContext context) {
    return Material(
          child: Container(
              color: Colors.deepOrange,
              child: const Center(
                  child: Text(
                'Hello Usama',
                 style: TextStyle(
                  fontSize: 40,
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),
              ))),
        );
  }
}

Learning FLUTTER

Material app:

title:

home:

PERFECTLY WORKING WIDGET ^ happy happy happy