Flutter Ui and Design

By
Flutter Ui and Design Blog

In flutter Ui and Design almost everything is a Widget.
So always remember that a further application is mostly made of widgets.

Download full source code,

Now, For design purpose we use following widget in this tutorial.

  • Center
  • Text
  • MaterialApp
  • Material
  • Scaffold
  • AppBar

those all above widget are use in side the belove sample code,

import 'package:flutter/material.dart';

void main() {
  runApp(
      Center(
        child: Text(
          "Hello Flutter",
          textDirection: TextDirection.ltr,
        ),
      )
  );
}

So within our own function let us use our new materialApp widget.
Within the runApp() function add materialApp widget.
In side the materialApp as a parameter First i will pass that title. Which will be the title of over application in our device.
And in our material widget we have one more property of home whre one more widget use called as Material.
andthis wizard allow us to provide a color to our application.
I will use lightGreen and then within this wizard i redefine child property.Then will pass in the center wizard.
New code look like this,

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      title: "My Flutter App",
      home: Material(
        color: Colors.lightGreen,
        child: Center(
          child: Text(
            "Hello Flutter",
            textDirection: TextDirection.ltr,
          ),
        ),
      ),
    )
  );
}

=> title:

set the application name, here our application name is My Flutter App
Minimize application that time display the name of the application.

=> home:

home contains application body part. you can check which property use inside the home Ctr + click.
Our application display the lightGreen background and center of the screen display Hello Flutter text.

Now text appears to be quite simple, they’ll let us apply a style to our text.

 style: TextStyle(color: Colors.white, fontSize: 40.0),

within the child:text add the above line. using this line change the text color and text font size.

So in place of home property in case of material project let us define one more widget instead of material directly use scaffold widget.
Trust me this scaffold wizard is very very important as it allow you to place at bar on top of your application.

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),
            ),
          ),
        ),
      ),
    )
  );
}

=> Scaffold

Above code Scaffold added new widget.
scaffold contain application bar on the top using appBar. appBar haveing vairouse property along with we use title.
body property, here we write our all Material widget code in side the body.

So this we learn in next section, click here, to learn about Organizing Flutter Application
If you know about how to install and setup flutter, click here.

Leave a Comment

Your email address will not be published.

Latest Blog