How to Make Bottom Sheet in Flutter | Mobile App Development

 Bottom Sheet

Source Code

   

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Bottom Sheet',
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  void _show(BuildContext ctx) {
    showModalBottomSheet(
        elevation: 10,
        backgroundColor: Colors.amber,
        context: ctx,
        builder: (ctx) => Container(
          width: 300,
          height: 250,
          color: Colors.white54,
          alignment: Alignment.center,
          child: Text('Breathe in... Breathe out...'),
        ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Sheet'),
      ),
      body: SafeArea(
        child: Center(
          child: ElevatedButton(
            child: Text('Show The BottomSheet'),
            onPressed: () => _show(context),
          ),
        ),
      ),
    );
  }
}