Component library
- Flutter course
- Expert
- Lesson 33/39
- 4 min
Build a reusable component library.
What is a component library?
A component library is a collection of reusable widgets. It gathers frequently used building blocks like buttons, cards and inputs into a single package. It is the application side of the design system and ensures a consistent look.
class PrimaryButton extends StatelessWidget {
final String label;
final VoidCallback onPressed;
const PrimaryButton({
super.key,
required this.label,
required this.onPressed,
});
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: onPressed,
child: Text(label),
);
}
}Flexibility through parameters
Components become flexible through parameters. But instead of exposing every possibility, you expose only the most common variations as parameters. You simplify usage by providing default values.
class AppCard extends StatelessWidget {
final Widget child;
final EdgeInsets? padding;
final Color? color;
const AppCard({
super.key,
required this.child,
this.padding,
this.color,
});
@override
Widget build(BuildContext context) {
return Container(
padding: padding ?? const EdgeInsets.all(16),
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(8),
),
child: child,
);
}
}Practice Write a custom button component
Write a StatelessWidget named AppButton. It takes label (String) and onPressed (VoidCallback) parameters, both required. The build method returns an ElevatedButton whose child is Text(label). In main, create an AppButton and print its label.
Starter code
import 'package:flutter/material.dart';
// AppButton: StatelessWidget tabanlı
// label (String) ve onPressed (VoidCallback) parametreleri
// build: ElevatedButton döndürür, child olarak metin göster
void main() {
}Sample solution
import 'package:flutter/material.dart';
class AppButton extends StatelessWidget {
final String label;
final VoidCallback onPressed;
const AppButton({
super.key,
required this.label,
required this.onPressed,
});
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: onPressed,
child: Text(label),
);
}
}
void main() {
final btn = AppButton(
label: 'Kaydet',
onPressed: () {},
);
print(btn.label);
}Expected output
Kaydet
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is the main benefit of a component library?
- Reduce app size
- Ensure consistency and reduce code duplication Correct answer
- Speed up network requests
- Eliminate compile time
Explanation: A component library gathers repeated UI structures in one place; this provides both a consistent look and less code duplication.
2 Required parameter
class AppCard extends StatelessWidget {
final Widget child;
const AppCard({super.key, ____});class AppCard extends StatelessWidget {
final Widget child;
const AppCard({super.key, required this.child});Explanation: child cannot be null; therefore you make it required with required this.child.
3 Component parts
| Term | Meaning |
|---|---|
StatelessWidget |
Stateless component base |
required |
Required parameter marker |
super.key |
Forwards key to parent |
VoidCallback |
Tap callback type |