Question 224854 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to make this Bottom Sheet open?

I was following a few tutorials and followed exactly to the tee, to create a bottom sheet, but it just doesn’t open.

The only message i get is ‘I/flutter ( 6593): Another exception was thrown: No MaterialLocalizations found’ in the debug console

Here’s the code:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Widget buildButtonSheet(BuildContext context) {
    return Container(
      color: Colors.white,
      height: 300,
      child: Center(
        child: Text('Sheet Opened'),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Bottom Sheet Example',
      home: Scaffold(
        backgroundColor: Colors.black,
        appBar: AppBar(
          title: const Text('Bottom Sheet Example'),
        ),
        body:         
        Center(
          child: ElevatedButton(
            child: const Text('Bottom Sheet'),
            onPressed: () {

              showModalBottomSheet(
                context: context, 
                builder: buildButtonSheet);

            },
          ),
        ),
      ),
    );
  }
}

I tried one of the solutions posted before (showModalBottomSheet() not opening a bottom modal in flutter)but didn’t work.

I tried out using different emulators as ChatGPT suggested also, but didn’t work.

Tags:

2

Answers


  1. 0

    Your context, doesn’t yet have a MaterialLocalizations widget in the widget tree, check this answer. So this means that you need ‘new’ context, and you have two possible solutions. You either move your body into new widget, or you can wrap body with Builder widget.

    Solution with Builder widget:

      @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Bottom Sheet Example',
      home: Scaffold(
        backgroundColor: Colors.black,
        appBar: AppBar(
          title: const Text('Bottom Sheet Example'),
        ),
        body: Builder(
          builder: (ctx) {
            return Center(
              child: ElevatedButton(
                child: const Text('Bottom Sheet'),
                onPressed: () {
                  showModalBottomSheet(context: ctx, builder: buildButtonSheet);
                },
              ),
            );
          },
        ),
      ),
    );
  }

    Solution with NewWidget:

    class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Bottom Sheet Example',
      home: Scaffold(
        backgroundColor: Colors.black,
        appBar: AppBar(
          title: const Text('Bottom Sheet Example'),
        ),
        body: NewWidget(),
      ),
    );
  }
}

class NewWidget extends StatelessWidget {
  const NewWidget({
    super.key,
  });

  Widget buildButtonSheet(BuildContext context) {
    return Container(
      color: Colors.white,
      height: 300,
      child: Center(
        child: Text('Sheet Opened'),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: const Text('Bottom Sheet'),
        onPressed: () {
          showModalBottomSheet(context: context, builder: buildButtonSheet);
        },
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0

    create a function such as showPersonalData(BuildContext context) outside of the build:

    void showPersonalData(BuildContext context) {
    showModalBottomSheet(
      context: context,
      builder: (context) {
        return Container(
          width: double.infinity,
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Color.fromARGB(115, 231, 231, 231),
                Color.fromARGB(77, 131, 131, 131),
              ],
              begin: Alignment.center,
              end: Alignment.bottomRight,
            ),
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(30),
              topRight: Radius.circular(30),
            ),
          ),
          child: const Padding(
            padding: EdgeInsets.all(20),
            child: Column(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text('Your text'),
              ],
            ),
          ),
        );
      },
    );
  }

    Now connect the function on the elevetatedButton’s onPressed:

    body:         
        Center(
          child: ElevatedButton(
            child: const Text('Bottom Sheet'),
            onPressed: () => showPersonalData(context),
          ),
        ),

    hope this will work for you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search