Gjenbrukbare komponenter er de vitale aspektene ved Dart-programmeringsspråket som Flutter er basert på. Dart og Flutter er begge sterkt påvirket av de objektorienterte programmeringsprinsippene.
Med de gjenbrukbare komponentene kan vi ganske enkelt definere en widget og legge inn en annen widget i den som et foreldre-barn-forhold. Ved å gjøre det kan vi enkelt dele de vanlige egenskapene mellom en gruppe widgets og opprettholde lesbarheten til UI-kodebasen.
La oss ha et enkelt eksempel for å forstå dette konseptet bedre. Anta at du vil lage en egendefinert knappkomponent som kan gjenbrukes i hvilken som helst del av Flutter-applikasjonen din.
For dette formålet definerer vi en ny klasse som utvider klassen `StatefulWidget`. Nedenfor er kodebiten til 'CustomButton'-widgeten.
``` dart
import 'package:flutter/material.dart';
klasse CustomButton utvider StatefulWidget {
endelig strengtekst;
endelig farge farge;
siste VoidCallback onPressed;
const CustomButton(
{required this.text, required this.color, required this.onPressed});
@overstyre
State createState() => _CustomButtonState();
}
klasse _CustomButtonState utvider tilstand {
@overstyre
Widget build(BuildContext-kontekst) {
return Elevated Button(
onPressed:widget.onPressed,
stil:ElevatedButton.styleFrom(
primær:widget.color,
),
barn:Tekst(widget.tekst),
);
}
}
```
La oss nå se hvordan du bruker denne "CustomButton". Anta at vi har en `MyApp`-klasse som utvider `StatelessWidget`-klassen. Vi trenger ganske enkelt å lage en forekomst av 'CustomButton'-widgeten og sende de nødvendige parameterne.
``` dart
import 'package:flutter/material.dart';
importer 'package:flutter_training_app/CustomButton.dart';
klasse MyApp utvider StatelessWidget {
const MyApp({Nøkkel? nøkkel}):super(nøkkel:nøkkel);
@overstyre
Widget build(BuildContext-kontekst) {
returner MaterialApp(
hjem:Stillas(
appBar:AppBar(
title:Text('Min app'),
),
body:Center(
barn:CustomButton(
tekst:'Klikk meg',
farge:Colors.blue,
onPressed:() {
// Gjør noe her.
},
),
),
),
);
}
}
```
Det er det! Vi har med suksess opprettet og brukt en gjenbrukbar komponent ved å bruke widgetens sammensetning. Ved å bruke denne teknikken kan vi forbedre gjenbrukbarheten og vedlikeholdet av koden til Flutter UI.
