Learning Flutter — Part 1

Jumpstart Your App Development Journey with Flutter.

Create a new Flutter App using below command in termin

flutter create dummy_app

Entrypoint :
After you create flutter project using “flutter create <app_name>”, you can see all platforms(Android, iOS, web, etc) being created within project. And you also notice a “lib” folder having “main.dart” file which is entry point of the application.

Dependencies :
Secondly you will notice a “pubspec.yaml” highlighted above which is equivalent to build.gradle in android where you define all the dependencies of the project. Below command is used to fetch the depencies mentioned in pubspec.yaml.

flutter pub get

Understanding main.dart

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

First line is the imprt for material package which is the design library provided by Google.

Then you will notice “runApp” method being called in main, which is the start of your app. And “MyApp” here is root widget.

Also notice MyApp is extending StatelessWidget which forces it to override build method. Build method takes care of rendering of that particular widget.

Widgets : Widgets are of two types primarly

1. Stateful widget — which can hold state. When you extend widget with it, you have to override method “createState()”, where State class forces to implment Widget build method as shown in below example.

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

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

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

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    throw UnimplementedError();
  }
}

→ Every change to setState() is going to rerun the build method above.
→ Shortcut to write statefull widget is “stf” and then press enter.

2. Stateless widget — which doesn’t hold state.

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

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    throw UnimplementedError();
  }
}

→ “BuildContext” is unique to every widget.
→ Shortcut to write stateless widget is “stl” and then press enter.

Const keyword :
Const (constant) in programming is a keyword that defines a variable or pointer as unchangeable. A const may be applied in an object declaration to indicate that the object, unlike a standard variable, does not change. Such fixed values for objects are often termed literals.

runApp(const MyApp());

Scaffold Widget :

Scafffold widget supports appBar, drawer, floating action button and body by default and is quite useful. E.g.

Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Text(
        'Hello Learners',
        style: Theme.of(context).textTheme.headlineMedium,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: {},
        tooltip: 'Help',
        child: const Icon(Icons.help),
      ), 
    );

Column and Row Widget :

Column is used to render child’s vertically. And Row is used to render children horizontally. Both have parameters like “mainAxisAlignment” and “crossAxisAlignment” which works based on rendering direction.

For ex : mainAxisAlignment for “Column” is vertical and crossAxisAlignment is horizontal. And for “row’s” its opposite.

Container Widget :
It is used to provide padding, margin or BoxDecoration kind of functionality with ease.

Container(
        height: 150,
        width: 150,
        padding: const EdgeInsets.all(20),
        margin: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(10),
        ),
);

Here if you notice padding and margin is being passed using “EdgeInsets” which gives multiple options, you can choose one based on your need.

If container widget doesn’t have child, then it constraints from its parent similar to “match_parent” in android. But if it has child it wraps its height and width according to child, similar to “wrap_content”.

Flexible and Expanded Widget :

Expanded is just a shorthand for Flexible

Expanded(
  child: Foo(),
);

is strictly equivalent to:

Flexible(
  fit: FlexFit.tight,
  child: Foo(),
);

Widget under Flexible are by default WRAP_CONTENT although you can change it using parameter fit.

Widget under Expanded is MATCH_PARENT you can change it using flex.

Creating Dynamic Lists using ListView :
We will use ListView builder for this purpose. Here “itemCount” denotes the number of times view should be added and is equivalent to “getItemCount” in Android , and “itemBuilder” is to render views and is equivalent to “onBindViewHolder” of RecylerView in Android.

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

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 10,
      itemBuilder: (context, index) {
        return DummyUI();
      },
    );
  }
}

— — — — — — — — — — — — — That’s all folks — — — — — - — — — — — — — —

Lets catchup in next part of this blog !!

Part 2: https://kapilvij.medium.com/learning-flutter-part-2-6444d80e1aa9