Organizing Flutter App

In this section we learn about how to organizing flutter app.
Within main function is growing and it is looking a bit messy.

Download full source code,

So here let us use some concept of Dart and try to place a code some where else.
Some of it is by creating a seprate class for that.

In flutter we follow a very common pattern.

We create a separate class that extends from stateless widget,

class MyFlutterApp extends StatelessWidget {

}

Stateless widget simply meansthat turn in this class will not contain any state ans it will never change in future.
So here the stateless widget is a superclass and MyFlutterApp is a subclass.
When you create class extending StatelessWidget that time override one methode is called build methode.
build methode default return type is widget.

class MyFlutterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return null;
  }
}

=> Note :

If buid method was not available, in this case click on class name ans press Alt + Enter, to genereate build methode autometically.

Now we have previouse code,

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      title: "My Flutter App",
      home: Scaffold(
        appBar: AppBar( title: Text("My First App Screen"),),
        body: Material(
          color: Colors.lightGreen,
          child: Center(
            child: Text(
              "Hello Flutter",
              textDirection: TextDirection.ltr,
              style: TextStyle(color: Colors.white, fontSize: 40.0),
            ),
          ),
        ),
      ),
    )
  );
}

this code how to make short?
we cut our code from the MaterialApp and paste in side the MyFlutterApp class return statement.
Our new MyFlutterApp class looking similar like this,

class MyFlutterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "My Flutter App",
      home: Scaffold(
        appBar: AppBar(
          title: Text("My First App Screen"),
        ),
        body: Material(
         color: Colors.lightGreen,
         child: Center(
         child: Text(
          "Hello Flutter",
          textDirection: TextDirection.ltr,
          style: TextStyle(color: Colors.white, fontSize: 40.0),
          ),
        ),
       ),
      ),
    );
  }
}

Here, our main function will changed and this will make clear nad very small.

void main() => runApp(MyFlutterApp());

main() function will become very small and easily readable. we remove {} braces with => fat arrow.
if you also write like this, then valid

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

How can we make more shorter code?

Follow the steps:

• Create directory in side lib folder name as app_screen
• Create new dart file inside the app_screen directory

Create FirstScreen class inside the app_screens directory withe exten Statelesswidget and override build methode.
Cut our Material Widget from the body class from the above code and paste inside the FirstScreen class return statement.
FirstScreen class see like this,

return Material(
      color: Colors.lightGreen,
      child: Center(
        child: Text(
          "Hello Flutter",
          textDirection: TextDirection.ltr,
          style: TextStyle(color: Colors.white, fontSize: 40.0),
        ),
      ),
    );

Full Source code look like this.
=> FirstScreen.dart in side app_screens

import 'package:flutter/material.dart';

class FirstScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Material(
      color: Colors.lightGreen,
      child: Center(
        child: Text(
          "Hello Flutter",
          textDirection: TextDirection.ltr,
          style: TextStyle(color: Colors.white, fontSize: 40.0),
        ),
      ),
    );
  }

}

=>

main.dart class look like

import 'package:flutter/material.dart';
import 'app_screens/first_screen.dart';

void main() => runApp(MyFlutterApp());

class MyFlutterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "My Flutter App",
      home: Scaffold(
        appBar: AppBar(
          title: Text("My First App Screen"),
        ),
        body: FirstScreen(),
      ),
    );
  }
}