How can create this type of dialog in Flutter?

Question

I want to create a dialog bottom sheet like below image gif. Button is from first screen when show dialog button is still clickable.

My Result

Answer 1

for more information about the bottom sheet please check the documentaton

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          onPressed: () {
            _settingModalBottomSheet();
          },
          child: Text('Show Bottom Sheet'),
        ),
      ),
    );
  }

  void _settingModalBottomSheet() {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext bc) {
        return Container(
          child: Wrap(
            children: <Widget>[
              ListTile(
                  leading: Icon(Icons.music_note),
                  title: Text('Music'),
                  onTap: () => {}),
              ListTile(
                leading: Icon(Icons.videocam),
                title: Text('Video'),
                onTap: () => {},
              ),
            ],
          ),
        );
      },
    );
  }
}

Answer 2

You can get this in 3 ways(first 2 ways will hide payment section as you needed)

`Case 1 - Use the global key

import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(MaterialApp(
    home: BottomWidget(),
  ));
}

class BottomWidget extends StatelessWidget {
  final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
  void showOrdersModel(BuildContext context) {
    scaffoldKey.currentState.showBottomSheet((context) {
      return Container(
        height: 250, // change height as required
        decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              blurRadius: 10,
              color: Colors.grey[300],
              spreadRadius: 5,
            ),
          ],
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(12),
            topRight: Radius.circular(12),
          ),
        ),
        child: Center(child: Text('Orders')),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldKey,
      body: Center(
        child: RaisedButton(
          onPressed: () => showOrdersModel(context), // pass context to work
          child: Text('Show my orders'),
        ),
      ),
    );
  }
}

Case 2 - Use scaffold Note: You need Scaffold widget

import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(MaterialApp(
    home: BottomWidget(),
  ));
}

class BottomWidget extends StatefulWidget {
  @override
  _BottomWidgetState createState() => _BottomWidgetState();
}

class _BottomWidgetState extends State<BottomWidget> {
  void showOrdersModel(BuildContext context) {
    Scaffold.of(context).showBottomSheet((context) {
      return Container(
        height: 250, // change height as required
        decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              blurRadius: 10,
              color: Colors.grey[300],
              spreadRadius: 5,
            ),
          ],
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(12),
            topRight: Radius.circular(12),
          ),
        ),
        child: Center(child: Text('Orders')),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Builder(
        builder: (ctx) => Center(
          child: RaisedButton(
            onPressed: () => showOrdersModel(ctx), // pass context to work
            child: Text('Show my orders'),
          ),
        ),
      ),
    );
  }
}

Case 3 - Use showModalBottomSheet from the flutter

import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(MaterialApp(
    home: BottomWidget(),
  ));
}

class BottomWidget extends StatelessWidget {
  void showOrdersModel(BuildContext context) {
    showModalBottomSheet(
      context: context,
      shape: RoundedRectangleBorder( // apply this to get the rounder corners
        borderRadius: BorderRadius.vertical(
          top: Radius.circular(20),
        ),
      ),
      clipBehavior: Clip.antiAliasWithSaveLayer,
      builder: (ctx) {
        return Container(
          height: 250, // change height as required
          color: Colors.transparent,
          child: Center(child: Text('Orders')),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          onPressed: () => showOrdersModel(context), // pass context to work
          child: Text('Show my orders'),
        ),
      ),
    );
  }
}