Challenge 1
- Flutter course
- Beginner
- Lesson 96/99
- 3 min
Build a card combining stateless and stateful widgets.
Combining Stateless and Stateful
In an app, both StatelessWidget and StatefulWidget can be used together. The outer shell is usually designed as a StatelessWidget, while the parts holding state are written as a separate StatefulWidget. This keeps the code organized and reusable.
class OuterShell extends StatelessWidget {
@override
Widget build(BuildContext context) {
return InnerState();
}
}Practice Make a Stateless and Stateful combination
Write a function basla that prints Basladi. Write a StatelessWidget named DisKabuk; in its build method, return a StatefulWidget named IcState. In main call basla and start DisKabuk with runApp.
Starter code
import 'package:flutter/material.dart';
// DisKabuk adinda bir StatelessWidget yaz
// IcState adinda bir StatefulWidget yaz
void main() {
// basla fonksiyonunu cagir
}Sample solution
import 'package:flutter/material.dart';
class DisKabuk extends StatelessWidget {
const DisKabuk({super.key});
@override
Widget build(BuildContext context) {
return const IcState();
}
}
class IcState extends StatefulWidget {
const IcState({super.key});
@override
State<IcState> createState() => _IcStateState();
}
class _IcStateState extends State<IcState> {
@override
Widget build(BuildContext context) {
return MaterialApp(home: Scaffold(body: Center(child: Text('Merhaba'))));
}
}
void basla() {
print('Basladi');
}
void main() {
basla();
runApp(const DisKabuk());
}Expected output
Basladi
Practice Make a counter card
Write a function baslat that prints Kart hazir. Write a StatelessWidget named SayacKarti; in its build method, return a StatefulWidget named SayacState. Let SayacState have an int counter variable with initial value 0. In main call baslat and start with runApp.
Starter code
import 'package:flutter/material.dart';
// SayacKarti adinda bir StatelessWidget yaz
// SayacState adinda durumlu bir widget yaz
// SayacState icinde int turunde baslangic 0 olan bir sayac degiskeni olsun
void main() {
}Sample solution
import 'package:flutter/material.dart';
class SayacKarti extends StatelessWidget {
const SayacKarti({super.key});
@override
Widget build(BuildContext context) {
return const SayacState();
}
}
class SayacState extends StatefulWidget {
const SayacState({super.key});
@override
State<SayacState> createState() => _SayacStateState();
}
class _SayacStateState extends State<SayacState> {
int _sayac = 0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(child: Text('$_sayac')),
),
);
}
}
void baslat() {
print('Kart hazir');
}
void main() {
baslat();
runApp(const SayacKarti());
}Expected output
Kart hazir
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which approach is correct when combining StatelessWidget and StatefulWidget?
- Only MaterialApp is used
- Outer shell StatelessWidget, inner stateful part StatefulWidget Correct answer
- All widgets must be StatelessWidget
- All widgets must be StatefulWidget
Explanation: The outer shell is Stateless, the inner stateful part is Stateful; this provides organized and reusable code.
2 Add the StatefulWidget name
class DisKabuk extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ____();
}
}class DisKabuk extends StatelessWidget {
@override
Widget build(BuildContext context) {
return IcState();
}
}Explanation: To call the inner stateful widget, you must use its class name; Text, Container and SizedBox are StatelessWidget.
3 Stateless and Stateful parts
| Term | Meaning |
|---|---|
StatelessWidget |
Outer shell |
StatefulWidget |
Inner stateful widget |
build |
Method that builds the widget |
setState |
Method that updates state |