Flutter Widgets Getting Started – Part1

First we will see how to build type’s of UI’s using flutter

Let’s start with a very basic hello world app

https://flutter.dev/docs/development/ui/widgets-intro#hello-world

import 'package:flutter/material.dart';

void main() {
  runApp(
    Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

Now this a very basic app in flutter.

Now you can run this using VS Code.

Few things before you run, make sure to increase the screen lock time on your phone. Or else your screen will keep locking and it will loose connection with VS Code. If you loose connection to device press F5 to launch again. This is more time taking so better to increase your screen lock time.

Now to understand the code, “main()” is the function from where our app starts and it will always call the “runApp” function. runApp function requires a widget in the constructor.

Widget is any UI component which flutter has.

You can also have a app like this with a simple Text widget

import 'package:flutter/material.dart';

void main() {
  runApp(Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
  );
}

If you hot restart this new code, you will the text hello world on the top left corner of your screen. The widget “Center” just make the text center in the screen.

There is also a detailed documentation of every widget where you see different properties of a widget https://api.flutter.dev/flutter/widgets/Center-class.html

https://api.flutter.dev/flutter/widgets/Text-class.html

Here another way of writing the same hello word code

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Hello, New Style!',
        textDirection: TextDirection.ltr,
      ),
    );
  }
}

In this we create our own widget “MyApp”. We can create our own widget’s in flutter which will return further widgets. This is quite common and always used. There are two types of widgets “Stateless” and “State-full”, right now we will not focus on the differences between the two rather just know there are two types. Right now we are using “Stateless” widget in our code.

Next, let’s look at another example


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

In this we are using MaterialApp widgets and when you deploy the app you will see a properly designed app using material ui. Cool!

This is the main purpose of widget provide fast and native mobile app experience with very less code/development time.

At this stage you can also read through https://flutter.dev/docs/get-started/codelab but it will be a bit more complex to understand.

Flutter Widgets Getting Started – Part1

Recent Posts

Categories