Flutter
Summary - Custom widget
Combine custom widgets and composition to build a card library.
The card library
By combining custom widgets, composition, and reusability you build a card library. A Kart widget takes baslik and altlik parameters and merges them with Padding and Column. The same Kart class is used across many screens.
class Kart extends StatelessWidget {
final String baslik;
final Widget altlik;
const Kart({super.key, required this.baslik, required this.altlik});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8),
child: Column(
children: [Text(baslik), altlik],
),
);
}
}
Exercise Build the card library
Define a StatelessWidget named Kart with required final String baslik and final Widget altlik fields. The build method should return a Padding with padding set to EdgeInsets.all(8), child set to a Column, and children containing Text(baslik) and altlik. Then define AnaEkran whose build method returns Kart(baslik: 'Başlık', altlik: Text('İçerik')). Print 'hazir' in main.
Show example solution
import 'package:flutter/widgets.dart';
class Kart extends StatelessWidget {
final String baslik;
final Widget altlik;
const Kart({super.key, required this.baslik, required this.altlik});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8),
child: Column(
children: [Text(baslik), altlik],
),
);
}
}
class AnaEkran extends StatelessWidget {
const AnaEkran({super.key});
@override
Widget build(BuildContext context) {
return Kart(
baslik: 'Başlık',
altlik: const Text('İçerik'),
);
}
}
void main() {
print('hazir');
}
Test yourself
-
Which concepts does the card library combine?
- Provider + ChangeNotifier + setState
- sqflite + http + jsonDecode
- Custom widget + composition + reusability
- GoRouter + GoRoute + context.go
Show answer
Custom widget + composition + reusability — The card library combines custom widget (the Kart class), composition (Padding + Column), and reusability (using the same Kart in many places). The other options concern data/network, navigation, and state management.
-
Column children inside Kart
return Padding(
padding: const EdgeInsets.all(8),
child: Column(
____: [Text(baslik), altlik],
),
);
Show answer
return Padding(
padding: const EdgeInsets.all(8),
child: Column(
children: [Text(baslik), altlik],
),
);
-
Summary parts
- özel widget
- StatelessWidget subclass
- kompozisyon
- Nesting widgets
- tekrar kullanılabilirlik
- Using one widget in many places
- Kart kütüphanesi
- The combined result
Next lesson: AnimatedContainer
