Implementation of Stateful and Stateless Widgets
Below is the Image with showing the Layout Tree:
Description of the widgets used are as follows:
- Scaffold – Implements the basic material design visual layout structure.
- App-Bar – To create a bar at the top of the screen.
- Text To write anything on the screen.
- Container – To contain any widget.
- Center – To provide center alignment to other widgets.
Example: The Layout Tree of basic app screen using Stateless Widgets:
import 'package:flutter/material.dart';
// function to trigger build process
void main() => runApp(const w3wiki());
class w3wiki extends StatelessWidget {
const w3wiki({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.lightGreen,
appBar: AppBar(
backgroundColor: Colors.green,
title: const Text("w3wiki"),
), // AppBar
body: Container(
child: const Center(
child: Text("Hello Geeks!!"),
), // Center
), // Container
), // Scaffold
); // MaterialApp
}
}
Example: The Layout Tree of basic app screen using Stateful Widgets. This also produces the same results as the above code.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
// ignore: library_private_types_in_public_api
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.lightGreen,
appBar: AppBar(
backgroundColor: Colors.green,
title: const Text("w3wiki"),
), // AppBar
body: const Center(
child: Text("Hello Geeks!!"),
), // Container
), // Scaffold
);// MaterialApp
}
}
Output:
What is Widgets in Flutter?
Flutter is Google’s UI toolkit for crafting beautiful, natively compiled iOS and Android apps from a single code base. To build any application we start with widgets – The building block of Flutter applications. Widgets describe what their view should look like given their current configuration and state. It includes a text widget, row widget, column widget, container widget, and many more.