Stateless Widget is very important for creating static pages in Flutter. If you will use a static process in your project you should use Stateless Widget for sure. Let's make an example
first we have to import our material
in vscode we can easily create our Stateless Widget like this
well we created a class which extends from StatelessWidget and you'll see that we should override the build method
Let's try to add some things in that Scaffold:
and try to create a SizedBox with height 10 and extract as a method
and let's create a Container and extract it as a widget
we can do it manually for sure let's try to create a Text widget which extends from StatelessWidget
and we can use them in our Column
in this example we showed what is stateless widget and why we are using it and we used some other widgets to understand it. Thx for reading <3
first we have to import our material
Kod:
import 'package:flutter/material.dart'
in vscode we can easily create our Stateless Widget like this
Kod:
class StatelessLearn extends StatelessWidget {
const StatelessLearn({super.key});
well we created a class which extends from StatelessWidget and you'll see that we should override the build method
Kod:
@override
Widget build(BuildContext context) {
return Scaffold();
Let's try to add some things in that Scaffold:
Kod:
appBar: AppBar(),
body: Column(
children: [
const TitleTextWidget(
text: "veli",
),
const TitleTextWidget(
text: "veli",
),
const TitleTextWidget(
text: "veli",
),
const TitleTextWidget(
text: "veli",
),
const TitleTextWidget(
text: "veli",
),
and try to create a SizedBox with height 10 and extract as a method
Kod:
SizedBox _emptyBox() => const SizedBox(
height: 10,
);
and let's create a Container and extract it as a widget
Kod:
class _CustomContainer extends StatelessWidget {
const _CustomContainer({
super.key,
});
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.red,
),
);
}
}
we can do it manually for sure let's try to create a Text widget which extends from StatelessWidget
Kod:
class TitleTextWidget extends StatelessWidget {
const TitleTextWidget({super.key, required this.text});
final String? text;
@override
Widget build(BuildContext context) {
return Text("data", style: Theme.of(context).textTheme.displaySmall);
}
}
and we can use them in our Column
Kod:
_emptyBox(),
const _CustomContainer(),
in this example we showed what is stateless widget and why we are using it and we used some other widgets to understand it. Thx for reading <3