Skip to main content

Easy Way to Define a StatelessWidget



 In Flutter, a StatelessWidget is a type of widget that does not change over time. It is immutable, meaning that its properties and state are fixed after it is created. You use StatelessWidget when the widget's appearance or behavior is determined entirely by its constructor parameters.

Easy Way to Define a StatelessWidget

Here’s a simple example:

import 'package:flutter/material.dart'; class MyWidget extends StatelessWidget { final String title; // Constructor to accept input MyWidget({required this.title}); @override Widget build(BuildContext context) { return Center( child: Text( title, style: TextStyle(fontSize: 24), ), ); } } void main() { runApp( MaterialApp( home: Scaffold( appBar: AppBar(title: Text('StatelessWidget Example')), body: MyWidget(title: 'Hello, Flutter!'), ), ), ); }

Explanation:

  1. Inheritance: The widget class extends StatelessWidget.
  2. Constructor: Pass any data the widget needs as constructor parameters.
  3. build() Method: This method is called to describe the widget's structure. It returns a widget tree that Flutter renders.

Use StatelessWidget for parts of your UI that are constant and don’t need to react to user interaction or changes in state. If dynamic behavior is needed, consider using a StatefulWidget instead.

Comments

Your Complete Flutter Roadmap: From Beginner to Pro

🌀 Flutter App Lifecycle – Easy Way to Understand

  When you build an app in Flutter , it goes through different states depending on how the user interacts with it (open, minimize, back button, etc). Think of it like a human day cycle – Wake up → Active → Sleep → Wake again . 🌱 1. main() – Birth of the App Every Flutter app starts from the main() function. void main() { runApp(MyApp()); } 👉 This is like turning ON the lights – your app is born. 🏗 2. Widgets Lifecycle In Flutter, everything is a Widget . There are two main types: StatelessWidget → UI that doesn’t change. StatefulWidget → UI that changes with user interaction. For StatefulWidget , the lifecycle looks like this: 🔹 When Widget is created createState() → Creates a State object (like preparing memory). initState() → First time setup (like waking up, stretching, preparing breakfast). Best place for API calls , animation controllers , initial values . 🔹 When Widget builds build() → Renders UI (like dressin...

📱 Flutter ListTile and ListView: Explained with Easy Examples

Flutter ListTile and ListView: When you start learning Flutter, two widgets often confuse beginners: ListTile  &  ListView . Both are used to display items in a list, but their purpose is different. Let’s break them down in a simple way. 🔹 What is ListTile in Flutter? ListTile is a ready-made widget used to show a single row (one item). It usually contains: title (main text) subtitle (small text under the title) leading (icon/image on the left) trailing (icon/text on the right) 👉 Think of ListTile as a single row card inside a list. ✅ Example of ListTile: import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: const Text("Flutter ListTile Example")), body: const ListTile( leading:...

Text Widget In Flutter

  The Text widget in Flutter is used to display text on the screen. It's one of the most fundamental widgets and supports a wide range of customizations to style, align, and manage text. Here’s a detailed overview: Basic Syntax dart Copy code Text( 'Hello, Flutter!', style: TextStyle(fontSize: 24, color: Colors.blue), textAlign: TextAlign.center, ) Key Properties data : The text string to display. Example: 'Hello, World!' . style : Defines the appearance of the text. Uses the TextStyle class for customization. Example : dart Copy code Text( 'Styled Text', style: TextStyle( fontSize: 20, fontWeight: FontWeight.bold, color: Colors.red, fontStyle: FontStyle.italic, letterSpacing: 2.0, wordSpacing: 5.0, decoration: TextDecoration.underline, ), ) textAlign : Aligns the text horizontally. Values: TextAlign.left , TextAlign.right , TextAlign.center , TextAlign.justify , etc. Example: dart Copy code textAlign: TextAlign.cente...