Di layar beranda myApp() saya memiliki widget stateless, yang berisi MaterialApp dan Scaffold. Scaffold memiliki properti drawer dan saya lulus saya membuat laci, dan salah satu item di laci saya perlu membuka showModalBottomSheet sambil menutup drawer. Bagaimana saya bisa mencapai ini? Saya sudah mencoba melewati context itu sendiri, dan sebagai globalKey.currentContext (setelah GlobalKey<ScaffoldState> globalKey = GlobalKey();) tetapi laci terkadang menutup, waktu lain memberi saya NoMethodFoundException (atau sesuatu seperti itu)

Singkatnya, bagaimana memiliki Scaffold drawer yang memiliki salah satu item, ketika diketuk menutup drawer dan showModalBottomSheet?

Kode saat ini:

class Timeline extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    GlobalKey<ScaffoldState> homeScaffoldKey = GlobalKey();

    return MaterialApp(
      title: "Test",
      theme: ThemeData(
        appBarTheme: AppBarTheme(iconTheme: IconThemeData(color: Colors.black)),
      ),
      home: Scaffold(
        key: homeScaffoldKey,
        drawer: showDrawer(homeScaffoldKey.currentContext),
        backgroundColor: Colors.grey[100],
        body: Stack(
          children: <Widget>[
            HomePageView(),
            AppBar(
              elevation: 0,
              backgroundColor: Colors.transparent,
            ),
          ],
        ),
      ),
    );
  }
}

Drawer showDrawer(BuildContext context) {
  void showCalendarsModalBottom() {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext builder) {
        return ListView.builder(
          itemCount: repo.calendars.length,
          itemBuilder: (builder, index) {
            return StatefulBuilder(
              builder: (builder, StateSetter setState) => ListTile(
                leading: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Checkbox(
                      value: repo.getIsEnabledCal(repo.getCal(index)),
                      onChanged: (value) {
                        setState(() {
                          repo.toggleCalendar(repo.getCal(index));
                        });
                      },
                    ),
                    Container(
                      height: 14,
                      width: 14,
                      margin: EdgeInsets.only(left: 2, right: 6),
                      decoration: BoxDecoration(
                        color: Colors.redAccent,
                        shape: BoxShape.circle,
                      ),
                    ),
                    Text(
                      repo.getCal(index).name,
                      style: TextStyle(
                        fontSize: 16,
                      ),
                    ),
                  ],
                ),
                onTap: () {
                  setState(() {
                    repo.toggleCalendar(repo.getCal(index));
                  });
                },
              ),
            );
          },
        );
      },
    );
  }

  return Drawer(
    child: ListView(
      children: <Widget>[
        DrawerHeader(
          child: Align(
            child: Text('Timeline', textScaleFactor: 2),
            alignment: Alignment.bottomLeft,
          ),
        ),
        ListTile(
          title: Text('Dark Mode'),
          onTap: () => Navigator.pop(context),
        ),
        ListTile(
          title: Text('Calenders'),
          onTap: () {
            Navigator.pop(context);

            showCalendarsModalBottom();
          },
        )
      ],
    ),
  );
}
1
wolfrevokcats 20 Agustus 2019, 08:33

1 menjawab

Jawaban Terbaik

Kode kerja yang diperbarui berdasarkan cuplikan kode Anda:

Anda harus memiliki statefulwidget yang akan membantu meneruskan konteks dari laci ke lembar bawah dan meneruskan context sebagai argumen dalam metode showCalendarModalBottomSheet().

void main() {
  runApp(new MaterialApp(home: Timeline(), debugShowCheckedModeBanner: false));
}

class Timeline extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: "Test",
      theme: ThemeData(
        appBarTheme: AppBarTheme(iconTheme: IconThemeData(color: Colors.black)),
      ),
     home: MyHomePage()
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

    @override
    Widget build(BuildContext context) {
      return Scaffold(
        drawer: AppDrawer(),
        backgroundColor: Colors.grey[100],
        body: Stack(
          children: <Widget>[
            //HomePageView(),
            AppBar(
              elevation: 0,
              backgroundColor: Colors.transparent,
            )
          ],
        )
      );
    }

    Widget AppDrawer() {
      return Drawer(
        child: ListView(
          children: <Widget>[
            DrawerHeader(
              child: Align(
                child: Text('Timeline', textScaleFactor: 2),
                alignment: Alignment.bottomLeft,
              ),
            ),
            ListTile(
              title: Text('Dark Mode'),
              onTap: () => Navigator.pop(context),
            ),
            ListTile(
              title: Text('Calenders'),
              onTap: () {
                Navigator.of(context).pop();
                showCalendarsModalBottom(context);
              },
            )
          ],
        ),
      );
    }

    Future<Null> showCalendarsModalBottom(context) {
      return showModalBottomSheet(context: context, builder: (context) => Container(
        color: Colors.red,
        // your code here
      ));
    }
  }

Dan hasilnya adalah: Saat menu laci aplikasi Kalender diketuk, itu menutup dan membuka lembar bawah dengan mulus. Jika Anda mengetuk laci aplikasi lagi dan mengulangi langkah-langkahnya, Anda akan melihat transisi yang mulus antara laci dan lembar bawah. Semoga ini menjawab pertanyaan Anda.

enter image description here

enter image description here

1
Darshan 20 Agustus 2019, 08:54