菜谱应用 (Recipe App)

我们的应用程序将提供一个硬编码的食谱列表，并允许我们使用滑块根据份数重新计算数量。

创建新应用

有两种简单的方法可以启动一个新的Flutter应用程序

  1. 通过IDE创建新项目。
  2. 通过flutter create命令创建新项目。

让我们的应用独一无二

将class MyApp extends StatelessWidget更改为class RecipeApp extends StatelessWidget。

这定义了一个名为RecipeApp的新Dart类，它扩展（或继承）自StatelessWidget。在Flutter中，构成用户界面的几乎所有东西都是一个小部件。StatelessWidget在您构建它之后不会改变。将RecipeApp视为应用程序的容器。


class RecipeApp extends StatelessWidget {

main()是应用程序启动时代码的入口点。runApp()告诉Flutter应用程序的顶级小部件是哪个。

为我们的应用设计样式

Widget build(BuildContext context) {
    const appTitle = "Recipe Calculator";
    final ThemeData theme = ThemeData();

    return MaterialApp(
        title: appTitle,
        theme: theme.copyWith(
            colorScheme: theme.colorScheme.copyWith(
                primary: Colors.grey,
                secondary: Colors.black,
            ),
        );
        home: const MyHomePage(title: appTitle),
    );
}

此代码更改了应用程序的外观

  1. 一个小部件的build()方法是组合其他小部件以创建新小部件的入口点。
  2. 主题决定了颜色等视觉方面。
  3. MaterialApp使用了Material Design，它将是RecipeApp中包含的小部件。
  4. 应用程序的标题是设备用来标识应用程序的描述。用户界面不会显示此内容。
  5. 通过复制主题并用更新后的副本替换颜色方案，我们可以更改应用程序的颜色。在这里，主颜色是Colors.grey，次颜色是Colors.black。

构建食谱列表

一个空的食谱应用程序没什么用。应用程序应该有一个漂亮的食谱列表供用户滚动。但是，在我们显示这些之前，我们需要数据来填充UI。

添加数据模型

  String label;
  String imageUrl;
  int servings;
  List<Ingredient> ingredients;

  Recipe(
    this.label,
    this.imageUrl,
    this.servings,
    this.ingredients,
  );

  static List<Recipe> samples = [
    Recipe(
      'Spaghetti and Meatballs',
      'assets/2126711929_ef763de2b3_w.jpg',
      4,
      [
        Ingredient(
          1,
          'box',
          'Spaghetti',
        ),
        Ingredient(
          4,
          '',
          'Frozen Meatballs',
        ),
        Ingredient(
          0.5,
          'jar',
          'sauce',
        ),
      ],
    ),
    Recipe(
      'Tomato Soup',
      'assets/27729023535_a57606c1be.jpg',
      2,
      [
        Ingredient(
          1,
          'can',
          'Tomato Soup',
        ),
      ],
    ),
    Recipe(
      'Grilled Cheese',
      'assets/3187380632_5056654a19_b.jpg',
      1,
      [
        Ingredient(
          2,
          'slices',
          'Cheese',
        ),
        Ingredient(
          2,
          'slices',
          'Bread',
        ),
      ],
    ),
    Recipe(
      'Chocolate Chip Cookies',
      'assets/15992102771_b92f4cc00a_b.jpg',
      24,
      [
        Ingredient(
          4,
          'cups',
          'flour',
        ),
        Ingredient(
          2,
          'cups',
          'sugar',
        ),
        Ingredient(
          0.5,
          'cups',
          'chocolate chips',
        ),
      ],
    ),
    Recipe(
      'Taco Salad',
      'assets/8533381643_a31a99e8a6_c.jpg',
      1,
      [
        Ingredient(
          4,
          'oz',
          'nachos',
        ),
        Ingredient(
          3,
          'oz',
          'taco meat',
        ),
        Ingredient(
          0.5,
          'cup',
          'cheese',
        ),
        Ingredient(
          0.25,
          'cup',
          'chopped tomatoes',
        ),
      ],
    ),
    Recipe(
      'Hawaiian Pizza',
      'assets/15452035777_294cefced5_c.jpg',
      4,
      [
        Ingredient(
          1,
          'item',
          'pizza',
        ),
        Ingredient(
          1,
          'cup',
          'pineapple',
        ),
        Ingredient(
          8,
          'oz',
          'ham',
        ),
      ],
    ),
  ];
}

class Ingredient {
  double quantity;
  String measure;
  String name;

  Ingredient(
    this.quantity,
    this.measure,
    this.name,
  );
}

这只是我们创建应用程序所有步骤的概述。

GitHub

查看 Github