Reusability
- Flutter course
- Intermediate
- Lesson 74/99
- 4 min
Reuse the same widget across screens.
Reusability
You can write a custom widget once and use it across many screens. The same Baslik class can appear in both AnaEkran and ProfilEkran; this prevents code duplication and ensures consistency. By placing the widget in a separate file and pulling it with import, you share it across the project.
class Baslik extends StatelessWidget {
final String yazi;
const Baslik({super.key, required this.yazi});
@override
Widget build(BuildContext context) => Text(yazi);
}
class AnaEkran extends StatelessWidget {
const AnaEkran({super.key});
@override
Widget build(BuildContext context) => Baslik(yazi: 'Ana');
}Defining a widget in a separate file
After placing a widget in its own file, you add import 'file_path.dart'; at the top of the file where you want to use it. Dart treats the file name as a library name. This way you access the same widget class across the project.
// widgets/baslik.dart
class Baslik extends StatelessWidget {
// ...
}
// ekrana_ekran.dart
import 'widgets/baslik.dart';
class AnaEkran extends StatelessWidget {
// Baslik is available here
}Practice Reuse the Baslik widget
Define a StatelessWidget named Baslik with a required final String yazi field whose build method returns Text(yazi). Then define another StatelessWidget named AnaEkran whose build method returns Baslik(yazi: 'Ana'). Print 'hazir' in main.
Starter code
import 'package:flutter/widgets.dart';
// Baslik StatelessWidget tanımla
// final String yazi (required)
// build Text(yazi) döndürsün
// AnaEkran StatelessWidget tanımla
// AnaEkran build metodu Baslik widget'ını kullansın
void main() {
// 'hazir' yazdır
}Sample solution
import 'package:flutter/widgets.dart';
class Baslik extends StatelessWidget {
final String yazi;
const Baslik({super.key, required this.yazi});
@override
Widget build(BuildContext context) {
return Text(yazi);
}
}
class AnaEkran extends StatelessWidget {
const AnaEkran({super.key});
@override
Widget build(BuildContext context) {
return Baslik(yazi: 'Ana');
}
}
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 What do you do to use a widget in another file?
- Call http.get
- Call jsonDecode
- Rewrite the widget
- Pull the file with import Correct answer
Explanation: To use a widget in a separate file you import that file. Rewriting causes duplication, http.get is a network request, and jsonDecode is for decoding JSON; none of these share files.
2 Import the file
// ana_ekran.dart
____
class AnaEkran extends StatelessWidget {
// Baslik burada kullanılır
}// ana_ekran.dart
import 'widgets/baslik.dart'
class AnaEkran extends StatelessWidget {
// Baslik burada kullanılır
}Explanation: In Dart you use import to bring in a file. export is for re-exporting to other libraries, and require and include are not Dart keywords.
3 Reusability parts
| Term | Meaning |
|---|---|
import |
File import |
ayrı dosya |
The widget's library |
aynı sınıf |
Used across many screens |
kod tekrarı |
The avoided problem |