Flutter - 多个小部件捕获的异常

Question

Hi I'm trying to add a drawer to my scaffold with the help of https://flutter.dev/docs/cookbook/design/drawer

And so far I'm getting multiple errors when I try to use it (and found 2, I don't know if there is more).

Code:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        child: Row(
          children: <Widget>[
            IconButton(icon: Icon(Icons.add), onPressed: () {}),
            ListView(
              padding: EdgeInsets.zero,
              children: <Widget>[
                DrawerHeader(
                  child: Text(
                    "What's up?",
                    style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                        fontSize: 30),
                  ),
                  decoration: BoxDecoration(color: Color(0xff171719)),
                ),
                ListTile(
                  title: Text(
                    "Change Theme",
                    style: TextStyle(fontSize: 24),
                  ),
                  // ignore: todo
                  onTap: () {}, //TODO add dark mode
                ),
                ListTile(
                  title: Text(
                    "Sign Out",
                    style: TextStyle(fontSize: 24),
                  ),
                  onTap: () {
                    AuthMethods().signOut().then(
                      (s) {
                        Navigator.pushReplacement(context,
                            MaterialPageRoute(builder: (context) => SignIn()));
                        Navigator.pop(context);
                      },
                    );
                    // ignore: todo
                  }, //TODO sign out
                ),
              ],
            ),
          ],
        ),
      ),

Exception caught by gesture:

Exception caught by rendering library:

Answer 1

You should put your ListView inside a Widget that will constraint the ListView vertically, such as Expanded:

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

void main() {
  runApp(
    MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(body: MyWidget()),
    ),
  );
}

class MyWidget extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final _drawerKey = useState<GlobalKey<ScaffoldState>>(GlobalKey());
    return Scaffold(
      key: _drawerKey.value,
      drawer: Drawer(
        child: Row(
          children: <Widget>[
            IconButton(icon: Icon(Icons.add), onPressed: () {}),
            Expanded(
              child: ListView(
                padding: EdgeInsets.zero,
                children: <Widget>[
                  DrawerHeader(
                    child: Text(
                      "What's up?",
                      style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 30),
                    ),
                    decoration: BoxDecoration(color: Color(0xff171719)),
                  ),
                  ListTile(
                    title: Text(
                      "Change Theme",
                      style: TextStyle(fontSize: 24),
                    ),
                    // ignore: todo
                    onTap: () {}, //TODO add dark mode
                  ),
                  ListTile(
                    title: Text(
                      "Sign Out",
                      style: TextStyle(fontSize: 24),
                    ),
                    onTap: () {
                      print('SIGN OUT');
                    }, //TODO sign out
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _drawerKey.value.currentState.openDrawer(),
      ),
    );
  }
}

Answer 2

I couldn't reproduce it on my end, but this usually means that there's a widget whose viewport doesn't have the dimensions established.

This generally happens when you add a ListView directly to a Row or Column. Y would suggest wrapping your ListView with an Expanded widget (or a Container).

Answer 3

• Solution 1: Set ListView inside Expanded
• Solution 2: ListView with the attribute: shrinkWrap: true,