如何在 Flutter 中导入定义“收藏夹”的库

Question

我很初学者..刚刚开始学习颤振。我关注 Google Codelabs 中的“Your First Flutter App”，并停在这一步：https://codelabs.developers.google.com/codelabs/flutter-codelab-first?hl=en#6

该指令要分为 2 列，用户可以在收藏夹页面看到他们选择的收藏夹名称。 我将代码复制到我的 main.dart （我使用 Visual Studio Code），保存文件后，我在视图中没有看到任何更改...我重新调试应用程序，Visual Studio 代码说：

您的项目中存在构建错误。

问题是： 没有为类型“MyAppState”定义吸气剂“favorites”。 尝试导入定义“favorites”的库，将名称更正为现有 getter 的名称，或者定义名为“favorites”的 getter 或字段。

任何人都可以帮我解决这个案子吗...非常感谢

我尝试从 https://codelabs.developers.google.com/codelabs/flutter-codelab-first?hl=en#6

复制代码

我复制后的所有 main.dart 如下：

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => MyAppState(),
      child: MaterialApp(
        title: 'my_awesome_namer',
        theme: ThemeData(
          useMaterial3: true,
          colorScheme: ColorScheme.fromSeed(seedColor: Color.fromRGBO(90, 124, 181, 1)),
        ),
        home: MyHomePage(),
      ),
    );
  }
}

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();

   // ↓ Add this.
  void getNext() {
    current = WordPair.random();
    notifyListeners();
  }
  
  void toggleFavorite() {}
}

// ...

// ...

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          SafeArea(
            child: NavigationRail(
              extended: false,
              destinations: [
                NavigationRailDestination(
                  icon: Icon(Icons.home),
                  label: Text('Home'),
                ),
                NavigationRailDestination(
                  icon: Icon(Icons.favorite),
                  label: Text('Favorites'),
                ),
              ],
              selectedIndex: 0,
              onDestinationSelected: (value) {
                print('selected: $value');
              },
            ),
          ),
          Expanded(
            child: Container(
              color: Theme.of(context).colorScheme.primaryContainer,
              child: GeneratorPage(),
            ),
          ),
        ],
      ),
    );
  }
}


class GeneratorPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();
    var pair = appState.current;

    IconData icon;
    if (appState.favorites.contains(pair)) {
      icon = Icons.favorite;
    } else {
      icon = Icons.favorite_border;
    }

    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          BigCard(pair: pair),
          SizedBox(height: 10),
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              ElevatedButton.icon(
                onPressed: () {
                  appState.toggleFavorite();
                },
                icon: Icon(icon),
                label: Text('Like'),
              ),
              SizedBox(width: 10),
              ElevatedButton(
                onPressed: () {
                  appState.getNext();
                },
                child: Text('Next'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

// ...

class BigCard extends StatelessWidget {
  const BigCard({
    super.key,
    required this.pair,
  });

  final WordPair pair;


@override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);       // ← Add this.
    // ↓ Add this.
    final style = theme.textTheme.displayMedium!.copyWith(
      color: theme.colorScheme.onPrimary,
    );

    return Card(
      color: theme.colorScheme.primary,    // ← And also this.
      child: Padding(
        padding: const EdgeInsets.all(20),
        // ↓ Change this line.
        // ↓ Make the following change.
        child: Text(
          pair.asLowerCase,
          style: style,
          semanticsLabel: "${pair.first} ${pair.second}",
        ),
      ),
    );
  }
}
// ...

我期望： 主页分为 2 列，用户可以在收藏夹页面看到他们选择的收藏夹名称（稍后将添加来自谷歌代码实验室的额外代码）

Answer 1

您需要在 favorites

上创建一个名为 MyAppState 的列表。将会是

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();

   // ↓ Add this.
  void getNext() {
    current = WordPair.random();
    notifyListeners();
  }
   
  var favorites = <WordPair>[]; //this line
  
  void toggleFavorite() {}
}