I'm trying to make a note app but there is a yellow square showing on the screen.

I've included the main.dart code and also allnotesscreens.dart. I think there is something wrong with allnotesscreens code, but I don't know what.

Maybe _loadViewMode() part.

Why this problem is happening?!!!

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(),
            ));
          },
        ),
      );
    }
  }
}

CodePudding user response：

The first few lines of your _AllNotesScreenState class are why there's a yellow square; that's what you're telling it to build.

class _AllNotesScreenState extends State<AllNotesScreen> {

  // this build function here is what is drawing to the screen
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child:
        Container(
          height: 200,
          width: 100,
          color: Colors.yellow,
        ),
      ),
    );
  }

Maybe it's just how you've pasted it in, but it appears as though you have a build function defined within the didChangeDependencies function. If you took it out of there, it would then make it apparent that you have two build functions defined for the class.

I'm assuming it's the second one that you actually want building.

  @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,
...