Modal Bottom Sheet in Flutter

 As an alternative to a menu or dialogue, a modal bottom sheet restricts the user from interacting with the application's other features. It will overlay the user interface, saving you from having to switch to a new page. It can be utilized to complete a quick task that doesn't call for building a whole new screen on mobile application.

Constructor

 Future<T> showModalBottomSheet <T>(

 {

  @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.
  • Backgoundcolor: display background color
  • Elevation: set shadow value
  • Shape: Shape of bottom sheet.
  • Clipbehavior: The content will be clipped according to the option
  • Barriercolor: color to display in the background
  • Isscrollcongtrolled:  enable or disable scrolling
  • Dismissible dismiss modal bottom sheet by tapping.
  • UserRootnavigator: when the true bottom sheet is displayed on the screen
  • Enabledrage: dragged up and down dismissed by sleeping downward.

Step-by-Step Implementation

Step 1: Create a New Project in Android Studio (File >new flutter project)


Step 2: Adding material package

Import method the runApp method in the main function call first while run the application.

 import 'package:flutter/material.dart';

 void main() {

     runApp(RunMyApp());

 }

Step 3: Final code of bottomsheet of application
 import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
runApp(HomeScreen());
}
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'showModalBottom',
home: Scaffold(
appBar: AppBar(
title: const Text('Show Bottomsheet'),
backgroundColor: Colors.blue,
),
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('Show BottomSheet'),
onPressed: () {
showModalBottomSheet<void>(
context: context,
builder: (BuildContext context) {
return SizedBox(
height: 200,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(child:Image.asset('assets/images/company_logo.png')
, height: 100,
width: 100,),
Container(padding:EdgeInsets.all(20),child: Text('Candidroot solutions')) ,

],
),
),
);
},
);
},
),
);
}
}
Step 3: Output of above example 


Happy coding!

365Bloggy May 30, 2024
Share this post
Tags
SUBSCRIBE THIS FORM


Archive