skip to Main Content

enter image description here

Hi all,

I would like to add a screen that slowly appears form the bottom or the screen and partially covers the main screen below. So you can still see the top part of the main screen. Does anyone know how to do this?
Thank you very much

3

Answers


  1. for this you can use showModalBottomSheet method the simple example is

        import 'package:flutter/material.dart';
    
    void main() => runApp(const BottomSheetApp());
    
    class BottomSheetApp extends StatelessWidget {
      const BottomSheetApp({super.key});
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(title: const Text('Bottom Sheet Sample')),
            body: const BottomSheetExample(),
          ),
        );
      }
    }
    
    class BottomSheetExample extends StatelessWidget {
      const BottomSheetExample({super.key});
    
      @override
      Widget build(BuildContext context) {
        return Center(
          child: ElevatedButton(
            child: const Text('showModalBottomSheet'),
            onPressed: () {
              showModalBottomSheet<void>(
                context: context,
                builder: (BuildContext context) {
                  return Container(
                    height: 200,
                    color: Colors.amber,
                    child: Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          const Text('Modal BottomSheet'),
                          ElevatedButton(
                            child: const Text('Close BottomSheet'),
                            onPressed: () => Navigator.pop(context),
                          ),
                        ],
                      ),
                    ),
                  );
                },
              );
            },
          ),
        );
      }
    }
    

    you can read more about this method here

    Login or Signup to reply.
  2. You can use showModalBottomSheet() same as below…

    showModalBottomSheet<void>(
                // 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: MediaQuery.of(context).size.height * 0.6,
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: const <Widget>[
                      Text('HERE You'll add all your content'),
                    ],
                  ),
                ),
              );
            },
          );
    

    You can call above method in

    initState() of screen or buttons onPressed or onTap.

    Login or Signup to reply.
  3. As per your shared Image I have try something like that Using ModalBottomSheet

    Your Button Widget

    ElevatedButton(
      child: const Text('Show Modal BottomSheet'),
      onPressed: () {
        showModalBottomSheet<void>(
          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(top: Radius.circular(25.0)),
          ),
          context: context,
          builder: (BuildContext context) {
            return modelSheet(context);
          },
        );
      },
    )
    

    bottomSheet Widget:

    modelSheet(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(12),
      decoration: const BoxDecoration(
        borderRadius: BorderRadius.vertical(top: Radius.circular(25.0)),
      ),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Icon(
              Icons.hourglass_empty_outlined,
              color: Colors.red,
              size: 40,
            ),
            const SizedBox(
              height: 10,
            ),
            const Text(
              'Beta version',
              style: TextStyle(
                fontSize: 30,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(
              height: 20,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const [
                Icon(
                  Icons.check,
                  color: Colors.red,
                ),
                Text('better price')
              ],
            ),
            const SizedBox(
              height: 10,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const [
                Icon(
                  Icons.check,
                  color: Colors.red,
                ),
                Text('early access')
              ],
            ),
            const SizedBox(
              height: 20,
            ),
            RichText(
              text: const TextSpan(
                text:
                    'Please mind that this is a beta version of the app. As a founding member you can get',
                style: TextStyle(fontSize: 20, color: Colors.black),
                children: <TextSpan>[
                  TextSpan(
                      text: '50% off',
                      style: TextStyle(fontWeight: FontWeight.bold)),
                  TextSpan(text: ' the price & early access. !'),
                ],
              ),
            ),
            const SizedBox(
              height: 20,
            ),
            const Text(
                'You can look forward to more teachers and practices very soon.'),
            const SizedBox(
              height: 20,
            ),
            ElevatedButton(
              onPressed: () => Navigator.pop(context),
              style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.red,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20)),
                  fixedSize: const Size(double.maxFinite, 50)),
              child: const Text('Got it'),
            ),
          ],
        ),
      ),
     );
    }
    

    Result Screen-> image

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search