Hello everyone, this post I made for how to use bottomsheet with GetX in Flutter. BottomSheets is one of most popular widget that display it content at the bottom. In GetX, we can using the bottomsheet with Get.bottomsheet(). There are some configuration that GetX provides in bottomsheet as below:
Future<T?> bottomSheet<T>(Widget bottomsheet,
{Color? backgroundColor,
double? elevation,
bool persistent = true,
ShapeBorder? shape,
Clip? clipBehavior,
Color? barrierColor,
bool? ignoreSafeArea,
bool isScrollControlled = false,
bool useRootNavigator = false,
bool isDismissible = true,
bool enableDrag = true,
RouteSettings? settings,
Duration? enterBottomSheetDuration,
Duration? exitBottomSheetDuration})
Whereas:
- backgrondColor: color of background in bottomsheet
- shape: provides shape to the bottom sheet
- barrierColor: displayed when bottomsheet is opened
- isDismissiable: allowed user click outside bottomsheet for close and it values is true or false
- enableDrag: default is true value, if we set is false then we cannot drag bottomsheet.
To check the bottomsheet is open or not, we can use the Get.isBottomSheetOpen();
Let check the full code example as below:
import 'package:flutter/material.dart';
import 'package:get/get.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return GetMaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter BottomSheet GetX'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'Hello world',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
openBottomSheet();
},
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
void openBottomSheet() {
Get.bottomSheet(
Scaffold(
appBar: AppBar(title: Text("Sign In")),
body: Center(
child: Padding(
padding: EdgeInsets.all(16),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 20),
const TextField(
keyboardType: TextInputType.name,
decoration: InputDecoration(
labelText: 'User Name'),
),
const TextField(
keyboardType: TextInputType.number,
decoration: InputDecoration(
labelText: 'Password'),
),
const SizedBox(
height: 15,
),
Row(
children: [
ElevatedButton(
onPressed: () {},
child: const Text('Submit')),
const SizedBox(
width: 15,
),
OutlinedButton(
onPressed: () {
Get.back();
},
child: const Text('Close'),
),
],
)
],
)))),
persistent: true,
isDismissible: false,
isScrollControlled: true,
enableDrag: false,
backgroundColor: Colors.white,
elevation: 1,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
);
}
}
0 Comments