Hello developers
මොකක්ද මේ Flutter Modal Bottom Sheet එක කියන්නේ ??
Modal Bottom Sheet යනු මෙනුවක් හෝ සංවාදයක් සඳහා විකල්පයක් වන අතර යෙදුමේ ඉතිරි කොටස සමඟ අන්තර්ක්රියා කිරීමෙන් පරිශීලකයා වළක්වයි. වෙනත් පිටුවකට සැරිසැරීමට අවශ්ය නොවන පරිදි එය UI හරහා දිස්වනු ඇත. සම්පූර්ණ නව තිරයම ඉදි කිරීමට අවශ්ය නොවන කුඩා කාර්යයක් කිරීමට එය භාවිතා කළ හැකිය.
Constructor:
Future showModalBottomSheet (
{@required BuildContext context,
@required WidgetBuilder builder,
Color backgroundColor,
double elevation,
ShapeBorder shape,
Clip clipBehavior,
Color barrierColor,
bool isScrollControlled: false,
bool useRootNavigator: false,
bool isDismissible: true,
bool enableDrag: true,
RouteSettings routeSettings}
)
Properties:
-
builder: A builder for the contents of the sheet.
-
backgroundColor: To display background color.
-
elevation: Elevates the snackbar by increasing shadow.
-
shape: Shape of the modal bottom sheet.
-
clipBehavior: The content will be clipped according to this option.
-
barrierColor: Color to display in the background after the modal bottom sheet is displayed.
-
isScrollControlled: Enable or disable scrolling.
-
useRootNavigator: The useRootNavigator parameter ensures that the root navigator is used to display the BottomSheet when set to true.
-
isDismissible: Specifies whether the user can dismiss modal bottom sheet by tapping on the scrim.
-
enableDrag: The enableDrag parameter specifies whether the bottom sheet can be dragged up and down and dismissed by swiping downwards.
-
routeSettings: Sets the RouteSettings of the modal bottom sheet.
Note: The context and builder have @required class applied which means these parameters are mandatory to use.
Implementation:
File: main.dart
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
// This is the main application widget.
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘Flutter Model Bottom Sheet',
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter Model Bottom Sheet'),
backgroundColor: Colors.green,
),
body: const ModalBottomSheetDemo(),
),
);
}
}
class ModalBottomSheetDemo extends StatelessWidget {
const ModalBottomSheetDemo({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: ElevatedButton(
child: const Text('showModalBottomSheet'),
onPressed: () {
// when raised button is pressed
// we display showModalBottomSheet
showModalBottomSheet(
// context and builder are
// required properties in this widget
context: context,
builder: (BuildContext context) {
// we set up a container inside which
// we create center column and display text
// Returning SizedBox instead of a Container
return SizedBox(
height: 200,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text('Apps Lanka Dev'),
],
),
),
);
},
);
},
),
);
}
}
We are developing Mobile application and Web application for more details visit our web site www.appslanka.lk
0 Comments