• For using StatelessWidget code snippet, write stless and press enter.

YT video:

https://youtu.be/zwPBMg3SHVU?si=NFlooeZiBXXnlZke

Stateless Widget:

State of the widget cannot change over time. That is, the layout or colour or any data about the widget cannot change over time.

Stateful Widget:

State of the widget can change over time, i.e. data about the widget can change over time.

In flutter, every widget is a class.

Now, we put every thing inside home: property of the MaterialApp Widget into a new class extending the StatelessWidget.

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home: Home(),
));

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text('my first app'),
          centerTitle: true,
          backgroundColor: Colors.red[600]
      ),
      body: Center(
        child: Text(
          'hello again, ninjas!',
          style: TextStyle(
            fontSize: 20.0,
            fontWeight: FontWeight.bold,
            letterSpacing: 2.0,
            color: Colors.grey[600],
            fontFamily: 'IndieFlower',
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.red[600],
        child: Text('click'),
      ),
    );
  }
}

Now that Home is a separate class and not inside the main(), so instead of hot restart, we can do hot reload.

About @override :

Override redefines the build function defined in StatelessWidget and marks that our’s build function will be used.

My code at end of 7th Lecture: