Stateless Widget in Flutter

In this Flutter lesson we want to talk about Stateless Widget in Flutter, first we want to have introduction to Stateless Widget and after that we will create a practical example about that.

What is Stateless Widget in Flutter?

In Flutter StatelessWidget is a type of widget that represents a UI component that does not require mutable state. Stateless widgets are immutable, it means that their properties cannot be changed once they are instantiated.

These are some key features of StatelessWidget:

Immutable Properties: Once you have created StatelessWidget, then you cannot change its properties. This means that all the configuration parameters provided during its creation remain constant throughout the widget’s lifetime.

No Internal State: Unlike StatefulWidgets, which can maintain and update their internal state, StatelessWidget does not have any internal state. It relies on the properties provided to determine its appearance and behavior.
Build Method: StatelessWidgets override the build method to describe the user interface for the widget. This method returns a widget tree, and it represents UI component that StatelessWidget represents.

How to Create Stateless Widget in Flutter?

Stateless widgets are useful for representing UI components that do not need to maintain any state internally, such as static text, icons, buttons or layout containers. They are lightweight and efficient because they do not need to managing state.

Now let’s create an example about StatelessWidget in Flutter

import 'package:flutter/material.dart';

class MyStatelessWidget extends StatelessWidget {
  final String title;

  const MyStatelessWidget({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: Text(
        title,
        style: TextStyle(fontSize: 24.0),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('StatelessWidget Example'),
      ),
      body: MyStatelessWidget(title: 'Hello, Welcome to codeloop.org'),
    ),
  ));
}

import 'package:flutter/material.dart';

class MyStatelessWidget extends StatelessWidget {

final String title;

const MyStatelessWidget({Key? key, required this.title}) : super(key: key);

@override

Widget build(BuildContext context) {

return Container(

alignment: Alignment.center,

child: Text(

title,

style: TextStyle(fontSize: 24.0),

);

}

void main() {

runApp(MaterialApp(

home: Scaffold(

appBar: AppBar(

title: Text('StatelessWidget Example'),

body: MyStatelessWidget(title: 'Hello, Welcome to codeloop.org'),

));

}

In this example, MyStatelessWidget is a StatelessWidget that displays a title passed as a property. It uses a Container widget to center-align a Text widget with the provided title. after that StatelessWidget is used as the body of a Scaffold widget inside MaterialApp.

Run your code in emulator and this will be the result

How to Run Dart Code in VS Code

FAQs:

What is the difference between a Stateful widget and a stateless widget?

Main difference between Stateful widget and StatelessWidget lies in how they handle state.

StatelessWidget: StatelessWidget is immutable and does not maintain any internal state. It relies on the properties provided to determine its appearance and behavior. Once it is created, then you can not change the properties of StatelessWidget.
Stateful widget: On the other hand StatefulWidget can maintain mutable state. It consists of two classes: StatefulWidget itself and that is immutable, also we have corresponding State class, which is mutable and holds the widget’s state. Stateful widgets can update their internal state and trigger rebuilds of the UI based on changes in state.

What are the properties of stateless widget in Flutter?

StatelessWidget in Flutter typically has the following properties:

Key: An optional key that uniquely identifies the widget inside its parent widget’s widget tree.
Constructor: A constructor to initialize the widget’s properties or configuration parameters.

Build method: The build() method, which returns a widget tree representing the UI component. This method is responsible for describing how the widget should be rendered based on its properties.

What is a Stateful widget?

StatefulWidget in Flutter is a widget that can maintain mutable state. It consists of two classes: StatefulWidget itself, which is immutable, and a corresponding State class, which is mutable and holds the widget’s state. Stateful widgets can update their internal state and trigger rebuilds of the UI based on changes in state.

Subscribe and Get Free Video Courses & Articles in your Email

What is Stateless Widget in Flutter?

How to Create Stateless Widget in Flutter?

FAQs:

Leave a Comment Cancel reply