SLW VS SFW
StateLessWidget
- SLW widgets are static widgets and don't change (properties or data) during lifetime
- SLW used to display on UI
- use SLW subclass
- Examples screen only show UI
- (Text, Icon, Image, Container)
StateFull Widget
SFW are dynamic widgets and change during the lifetime
STW have an internal state
STW is used for data change
use SFW subclass + setstate ()
Examples Screen with data (variable) change
(TextField, Radion button, Checkbox button
SFW Example(Checkbox)
SFW Example(TextField)
Coding Example (SLW)
// stateless widget
import 'package:flutter/material.dart';
void main(List<String> args) {
runApp(MaterialApp(
home: counter(), //calling SLW
));
}
//outside main()
class counter extends StatelessWidget {
const counter({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.amber,
appBar: AppBar(
backgroundColor: Colors.black,
title: const Text(
"Counter",
style: TextStyle(fontSize: 20),
),
centerTitle: true,
),
body: Padding(
padding: const EdgeInsets.all(20),
child: Column(
children: [
Center(
child: Text( // Statless widget
"welcome to Flutter",
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
)
],
),
),
);
}
}
SateFull Widget
// statefull widget
import 'package:flutter/material.dart';
void main(List<String> args) {
runApp(MaterialApp(
home: calculator(), //calling SFW
));
}
//outside main()
class calculator extends StatefulWidget { // SFW class
const calculator({super.key});
@override
State<calculator> createState() => _calculatorState();
}
class _calculatorState extends State<calculator> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Center(
child: Text(
"we are using StateFull Widget",
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
)
],
),
);
}
}
