Modal Bottom Sheet to alternatywa dla menu lub okna dialogowego i uniemożliwia użytkownikowi interakcję z resztą aplikacji. Pojawia się w interfejsie użytkownika, dzięki czemu nie ma potrzeby przechodzenia do innej strony. Można go wykorzystać do wykonania małego zadania, które nie wymaga budowy całego nowego ekranu.
Modalne dolne arkusze we Flutterze są używane do wyświetlania dodatkowych treści, jak sama nazwa wskazuje, dolny arkusz znajduje się na dole ekranu.
Aby zbudować taki dolny arkusz należy najpierw Scaffold wyekstrahować do oddzielnego widżetu, ja nazwałam go HomePage a następnie dodać przycisk:
class HomePage extends StatelessWidget {
const HomePage({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
child: const Text('Otwórz'),
onPressed: () {
showModalBottomSheet(
context: context,
builder: (context) => const Center(
child: Text('Witaj w mojej aplikacji!'),
),
);
},
),
),
);
}
}Dodatkowe rzeczy do zmiany w Modal Bottom Sheet
Domyślnie dolny arkusz nie jest zaokrąglony, aby to zmienić możemy podać kształt i zaokrąglić górne rogi:
showModalBottomSheet(
context: context,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
top: Radius.circular(20),
),
),
builder: (context) => const Center(
child: Text('Witaj w mojej aplikacji!'),
),
);
Możemy zmienić kolor tła dolnego arkusza, jak również górnej strony:
showModalBottomSheet(
backgroundColor: Colors.lightGreen,
barrierColor: Colors.yellow,
Cały kod z logo Flutter:
class HomePage extends StatelessWidget {
const HomePage({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
child: const Text('Otwórz'),
onPressed: () {
showModalBottomSheet(
backgroundColor: const Color.fromARGB(255, 164, 203,115),
barrierColor: const Color.fromARGB(255, 210, 209, 198),
context: context,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
top: Radius.circular(20),
),
),
builder: (context) => Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text(
'Witaj w mojej aplikacji!',
style: TextStyle(
fontSize: 30,
),
),
SizedBox(
height: 20,
),
FlutterLogo(size: 100),
],
),
),
);
},
),
),
);
}
}PODSUMOWANIE:
Flutter jest wyposażony w konfigurowalne widżety, których można używać do tworzenia aplikacji międzyplatformowych głównie na Androida i iOS. Dzięki widżetowi showModalBottomSheet możesz tworzyć modalne dolne arkusze, które poprawiają wrażenia użytkownika dla osób uzyskujących dostęp do Twojej aplikacji na urządzeniu mobilnym.
Comments