Does Flutter require Dart

In our previous section we have seen what are important concepts in Dart. Flutter requires, not only Dart, but it also requires that you must have understood those concepts.

Why?

Because, firstly, the Flutter-Framework needs to implement the important concepts.

We will see that in a minute.

Secondly, we use Dart coding convention in Flutter. As a result a simple Flutter Application uses the same coding pattern. We have seen that in Dart. The Dart built-in “Type” is used. We can use the conditional expressions, and many more in Flutter.

Finally, an absolute beginner wants to learn the Flutter structure first.

Therefore, let us first create a simple Flutter Application.

flutter create first_flutter_app

As a result, we see the following code in our Visual studio IDE.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: 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,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

It is a long code. Moreover, an absolute beginner with no coding background, is not supposed to understand it.

Right?

However, we may try to understand the Structure of the Flutter Application.

Structure of a Flutter Application

Therefore, next, we are going to understand the structure as a beginner. It is presumed that we do not know coding. We have just started learning Dart.

In that scenario, the above code really does not make any sense. It might make sense when we understand the Structure. In addition we can analyse them after that.

Let us start with the first part.

import 'package:flutter/material.dart';

We have imported the Flutter Material library. So that we can build a Material App. Previously we have learned how to use the Dart core library.

The Dart and Flutter both start from the entry point “main()” function. It is a top-level function that returns void.

Inside the “main()” function we run another function “runApp()” and pass the root Widget.

We will learn about the “function” in Dart and Flutter in the next section.

What is Flutter Widget?

In Flutter everything is Widget. A Widget is nothing but a “Class”. And as a Widget it always builds other Widgets inside it.

Previously we have learned that a “Class” defines the “Type” of an “Object”.

Consequently, what we see is a Widget tree.

Let us see a Flutter Application. It will clarify the concept of Widget Tree.

The above image shows us a Widget tree. There are several Widgets under the root Widget.

The coming sections will show us what is a “function” and “class”. Till then, we just try to understand how the other part of the structure works.

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

As the top-level “main()” function returns void, the “runApp()” function passes the root Widget.

The root Widget “MyApp()” returns a “MaterialApp()” Widget inside its “build()” method.

As a consequence the “MaterialApp()” Widget, or the Class passes several arguments through its Constructor.

One of the arguments is “home”.

Let us see the code.

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

The ” MyHomePage()” is our home page. Moreover, it is the “subclass” of a Stateful Widget.

The same way, just before we have seen that the root Widget “MyAp()” is the “subclass” of a Stateless Widget.

We will not discuss the difference between the Stateful and the Stateless Widget at this point.

Why?

Because that is beyond the scope of an Absolute beginner. We will learn it later, when the proper time comes.

However, we have a basic idea how Flutter Application builds its Structure.

Next, we will learn what are “function” and “class” in Dart. Subsequently, we will come back again and try to understand the rest part of the Flutter Application Structure.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter