Flutter笔记应用构建异常：屏幕出现黄色方块问题排查

我正在开发一款Flutter笔记应用，但屏幕上出现了一个黄色方块。怀疑问题出在allnotesscreens.dart的_loadViewMode()部分，已提供main.dart和allnotesscreens.dart代码，希望排查原因。

main.dart代码 #

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'providers/label_provider.dart';
import 'providers/note_provider.dart';
import 'package:provider/provider.dart';
import 'constants/app_constants.dart';
import 'screens/all_labels_screen.dart';
import 'screens/all_notes_screen.dart';
import 'screens/drawer_screen.dart';

main() {
  SystemChrome.setSystemUIOverlayStyle(
    const SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      systemNavigationBarColor: ColorsConstant.grayColor,
    ),
  );

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
   return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => NoteProvider()),
        ChangeNotifierProvider(create: (_) => LabelProvider()),
      ],
      builder: (context, child) => MaterialApp(
        title: 'Note-App',
        debugShowCheckedModeBanner: false,
        themeMode: ThemeMode.dark,
        theme: customThemeData(context),
        initialRoute: '/',
        routes: {
          '/': (context) => const AllNotesScreen(),
          DrawerScreen.routeName: (context) => const DrawerScreen(),
          AllLabelsScreen.routeName: (context) => const AllLabelsScreen(),
        },
      ),
    );
  }
}

allnotesscreens.dart代码 #

class AllNotesScreen extends StatefulWidget {
  const AllNotesScreen({Key? key}) : super(key: key);

  @override
  State<AllNotesScreen> createState() => _AllNotesScreenState();
}

class _AllNotesScreenState extends State<AllNotesScreen> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child:
        Container(
          height: 200,
          width: 100,
          color: Colors.yellow,
        ),
      ),
    );
  }

  String _viewMode = ViewMode.staggeredGrid.name;
  bool _isLoading = false;
  final _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  void initState() {
    super.initState();
    setState(() {
      _isLoading = true;
    });
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();

    Future _loadViewMode() async {
      final prefs = await SharedPreferences.getInstance();
      if (!prefs.containsKey('view-mode')) return;
      setState(() {
        _viewMode = prefs.getString('view-mode') ?? ViewMode.staggeredGrid.name;
      });
    }

    @override
    Widget build(BuildContext context) {
      return Scaffold(
        key: _scaffoldKey,
        appBar: AppBar(
          title: const Text(
            "all notes",
            style: TextStyleConstants.titleAppBarStyle,
          ),
          actions: [
            if (context
                .watch<NoteProvider>()
                .items
                .isNotEmpty)
              IconButton(
                onPressed: () {
                  showSearch(
                    context: context,
                    delegate: NoteSearch(isNoteByLabel: false),
                  );
                },
                icon: const Icon(Icons.search),
              ),
            IconButton(
              onPressed: () async {
                final result = await changeViewMode(_viewMode);
                setState(() {
                  _viewMode = result;
                });
              },
              icon: _viewMode == ViewMode.staggeredGrid.name
                  ? const Icon(Icons.view_stream)
                  : const Icon(Icons.grid_view),
            ),
            const SizedBox(
              width: 6,
            )
          ],
        ),
        drawer: const DrawerScreen(),
        body: _isLoading
            ? const Center(
          child: CircularProgressIndicator(),
        )
            : RefreshIndicator(
          onRefresh: () => refreshOrGetData(context),
          child: Consumer<NoteProvider>(
            builder: (context, noteProvider, child) =>
            noteProvider.items.isNotEmpty
                ? NoteListViewWidget(
              notes: noteProvider.items,
              viewMode: _viewMode,
              scaffoldContext: _scaffoldKey.currentContext!,
            )
                : child!,
            child: const NoNoteUIWidget(
              title: "your notes after adding will appear here",
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: linearGradientIconAdd,
          onPressed: () {
            Navigator.of(context).push(MaterialPageRoute(
              builder: (context) => const EditNoteScreen(),
            ));
          },
        ),
      );
    }
  }
}

问题原因分析 #

1. 重复定义build方法：_AllNotesScreenState中存在两个build方法，外层的build直接返回了带黄色容器的Scaffold，Flutter会优先执行这个外层方法，导致你看到黄色方块，而你写的正常页面逻辑（嵌套在didChangeDependencies内的build）根本不会被执行。
2. _loadViewMode方法未被调用：这个方法定义在didChangeDependencies内部，但没有执行，不过这不是黄色方块的直接原因。
3. 语法错误：build方法嵌套：build是State的生命周期方法，不能嵌套在didChangeDependencies这类方法内部，属于代码结构错误。

修复步骤 #

1. 删除外层的build方法（即返回黄色容器的那个），保留正确的页面build逻辑。
2. 将_loadViewMode方法移到State类的顶层，不要嵌套在didChangeDependencies内。
3. 在didChangeDependencies中调用_loadViewMode，并增加判断避免重复执行。

修复后的核心代码示例 #

class _AllNotesScreenState extends State<AllNotesScreen> {
  String _viewMode = ViewMode.staggeredGrid.name;
  bool _isLoading = false;
  final _scaffoldKey = GlobalKey<ScaffoldState>();
  bool _hasLoadedViewMode = false; // 标记是否已加载视图模式

  @override
  void initState() {
    super.initState();
    setState(() {
      _isLoading = true;
    });
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    if (!_hasLoadedViewMode) {
      _loadViewMode();
      _hasLoadedViewMode = true;
    }
  }

  Future _loadViewMode() async {
    final prefs = await SharedPreferences.getInstance();
    if (!prefs.containsKey('view-mode')) return;
    setState(() {
      _viewMode = prefs.getString('view-mode') ?? ViewMode.staggeredGrid.name;
      _isLoading = false; // 加载完成后关闭加载状态
    });
  }

  // 这里保留原来的build方法逻辑
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // ... 原页面代码
    );
  }
}

内容的提问来源于stack exchange，提问作者ding22