Summary - Custom widget
- Flutter course
- Intermediate
- Lesson 75/99
- 4 min
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],
),
);
}
}Practice 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.
Starter code
import 'package:flutter/widgets.dart';
// Kart StatelessWidget tanımla
// final String baslik (required)
// final Widget altlik (required)
// build Padding döndürsün
// padding EdgeInsets.all(8), child Column
// children [Text(baslik), altlik]
// AnaEkran tanımla
// AnaEkran build metodu Kart widget'ını kullansın
void main() {
// 'hazir' yazdır
}Sample 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');
}Expected output
hazir
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which concepts does the card library combine?
- Provider + ChangeNotifier + setState
- sqflite + http + jsonDecode
- Custom widget + composition + reusability Correct answer
- GoRouter + GoRoute + context.go
Explanation: 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.
2 Column children inside Kart
return Padding(
padding: const EdgeInsets.all(8),
child: Column(
____: [Text(baslik), altlik],
),
);return Padding(
padding: const EdgeInsets.all(8),
child: Column(
children: [Text(baslik), altlik],
),
);Explanation: Column takes multiple widgets, so you use the children parameter. child expects a single widget, and items and widgets are not Column's parameter names.
3 Summary parts
| Term | Meaning |
|---|---|
özel widget |
StatelessWidget subclass |
kompozisyon |
Nesting widgets |
tekrar kullanılabilirlik |
Using one widget in many places |
Kart kütüphanesi |
The combined result |