当前位置: 首页 > 文档资料 > Flutter 英文文档 >

Write your first Flutter app, part 1

优质
小牛编辑
142浏览
2023-12-01

The app that you'll be buildingpre .highlight { background-color: #dfd; }

This is a guide to creating your first Flutter app. If you are familiar with object-oriented code and basic programming concepts such as variables, loops, and conditionals, you can complete this tutorial. You don’t need previous experience with Dart or mobile programming.

This guide is part 1 of a two-part codelab. You can find part 2 on Google Developers. Part 1 can also be found on Google Developers.

What you’ll build in part 1

You’ll implement a simple mobile app that generates proposed names for a startup company. The user can select and unselect names, saving the best ones. The code lazily generates names. As the user scrolls, more names are generated. There is no limit to how far a user can scroll.

The animated GIF shows how the app works at the completion of part 1.

Step 1: Create the starter Flutter app

Create a simple, templated Flutter app, using the instructions in Getting Started with your first Flutter app. Name the project startup_namer (instead of myapp).

In this codelab, you’ll mostly be editing lib/main.dart, where the Dart code lives.

  1. Replace the contents of lib/main.dart.
    Delete all of the code from lib/main.dart. Replace with the following code, which displays “Hello World” in the center of the screen.

    lib/main.dart
    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Welcome to Flutter',
          home: Scaffold(
            appBar: AppBar(
              title: Text('Welcome to Flutter'),
            ),
            body: Center(
              child: Text('Hello World'),
            ),
          ),
        );
      }
    }
  2. Run the app in the way your IDE describes. You should see either Android or iOS output, depending on your device.

    Hello world app on Android
    Android
    Hello world app on iOS
    iOS

Observations

  • This example creates a Material app. Material is a visual design language that is standard on mobile and the web. Flutter offers a rich set of Material widgets.
  • The main() method uses arrow (=>) notation. Use arrow notation for one-line functions or methods.
  • The app extends StatelessWidget which makes the app itself a widget. In Flutter, almost everything is a widget, including alignment, padding, and layout.
  • The Scaffold widget, from the Material library, provides a default app bar, title, and a body property that holds the widget tree for the home screen. The widget subtree can be quite complex.
  • A widget’s main job is to provide a build() method that describes how to display the widget in terms of other, lower level widgets.
  • The body for this example consists of a Center widget containing a Text child widget. The Center widget aligns its widget subtree to the center of the screen.

Step 2: Use an external package

In this step, you’ll start using an open-source package named english_words, which contains a few thousand of the most used English words plus some utility functions.

You can find the english_words package, as well as many other open source packages, on the Pub site.

  1. The pubspec file manages the assets and dependencies for a Flutter app. In pubspec.yaml, add english_words (3.1.0 or higher) to the dependencies list:

    {step1_base → step2_use_package}/pubspec.yaml
    @@ -5,4 +5,5 @@
    5 5dependencies:
    6 6flutter:
    7 7sdk: flutter
    8 8cupertino_icons: ^0.1.2
    9+ english_words: ^3.1.0
  2. While viewing the pubspec in Android Studio’s editor view, click Packages get. This pulls the package into your project. You should see the following in the console:

    $ flutter packages get
    Running "flutter packages get" in startup_namer...
    Process finished with exit code 0
    

    Performing Packages get also auto-generates the pubspec.lock file with a list of all packages pulled into the project and their version numbers.

  3. In lib/main.dart, import the new package:

    lib/main.dart
    import 'package:flutter/material.dart';
    import 'package:english_words/english_words.dart';

    As you type, Android Studio gives you suggestions for libraries to import. It then renders the import string in gray, letting you know that the imported library is unused (so far).

  4. Use the English words package to generate the text instead of using the string “Hello World”:

    {step1_base → step2_use_package}/lib/main.dart
    @@ -5,6 +6,7 @@
    5 6class MyApp extends StatelessWidget {
    6 7@override
    7 8Widget build(BuildContext context) {
    9+ final wordPair = WordPair.random();
    8 10return MaterialApp(
    9 11title: 'Welcome to Flutter',
    10 12home: Scaffold(
    @@ -12,7 +14,7 @@
    12 14title: Text('Welcome to Flutter'),
    13 15),
    14 16body: Center(
    15- child: Text('Hello World'),
    17+ child: Text(wordPair.asPascalCase),
    16 18),
    17 19),
    18 20);
  5. If the app is running, hot reload to update the running app. Each time you click hot reload, or save the project, you should see a different word pair, chosen at random, in the running app. This is because the word pairing is generated inside the build method, which is run each time the MaterialApp requires rendering, or when toggling the Platform in Flutter Inspector.

    App at completion of second step on Android
    Android
    App at completion of second step on iOS
    iOS

Problems?

If your app is not running correctly, look for typos. If needed, use the code at the following links to get back on track.

Step 3: Add a Stateful widget

Stateless widgets are immutable, meaning that their properties can’t change—all values are final.

Stateful widgets maintain state that might change during the lifetime of the widget. Implementing a stateful widget requires at least two classes: 1) a StatefulWidget class that creates an instance of 2) a State class. The StatefulWidget class is, itself, immutable, but the State class persists over the lifetime of the widget.

In this step, you’ll add a stateful widget, RandomWords, which creates its State class, RandomWordsState. You’ll then use RandomWords as a child inside the existing MyApp stateless widget.

  1. Create a minimal state class. Add the following to the bottom of main.dart:

    lib/main.dart (RandomWordsState)
    class RandomWordsState extends State<RandomWords> {
      // TODO Add build() method
    }

    Notice the declaration State<RandomWords>. This indicates that we’re using the generic State class specialized for use with RandomWords. Most of the app’s logic and state resides here—it maintains the state for the RandomWords widget. This class saves the generated word pairs, which grows infinitely as the user scrolls, and favorite word pairs (in part 2), as the user adds or removes them from the list by toggling the heart icon.

    RandomWordsState depends on the RandomWords class. You’ll add that next.

  2. Add the stateful RandomWords widget to main.dart. The RandomWords widget does little else beside creating its State class:

    lib/main.dart (RandomWords)
    class RandomWords extends StatefulWidget {
      @override
      RandomWordsState createState() => RandomWordsState();
    }

    After adding the state class, the IDE complains that the class is missing a build method. Next, you’ll add a basic build method that generates the word pairs by moving the word generation code from MyApp to RandomWordsState.

  3. Add the build() method to RandomWordsState:

    lib/main.dart (RandomWordsState)
    class RandomWordsState extends State<RandomWords> {
      @override
      Widget build(BuildContext context) {
        final wordPair = WordPair.random();
        return Text(wordPair.asPascalCase);
      }
    }
  4. Remove the word generation code from MyApp by making the changes shown in the following diff:

    {step2_use_package → step3_stateful_widget}/lib/main.dart
    @@ -6,7 +6,6 @@
    6 6class MyApp extends StatelessWidget {
    7 7@override
    8 8Widget build(BuildContext context) {
    9- final wordPair = WordPair.random();
    10 9return MaterialApp(
    11 10title: 'Welcome to Flutter',
    12 11home: Scaffold(
    @@ -14,8 +13,8 @@
    14 13title: Text('Welcome to Flutter'),
    15 14),
    16 15body: Center(
    17- child: Text(wordPair.asPascalCase),
    16+ child: RandomWords(),
    18 17),
    19 18),
    20 19);
    21 20}
  5. Restart the app. The app should behave as before, displaying a word pairing each time you hot reload or save the app.

Problems?

If your app is not running correctly, you can use the code at the following link to get back on track.

Step 4: Create an infinite scrolling ListView

In this step, you’ll expand RandomWordsState to generate and display a list of word pairings. As the user scrolls, the list displayed in a ListView widget, grows infinitely. ListView’s builder factory constructor allows you to build a list view lazily, on demand.

  1. Add a _suggestions list to the RandomWordsState class for saving suggested word pairings. Also, add a _biggerFont variable for making the font size larger.

    lib/main.dart
    class RandomWordsState extends State<RandomWords> {
      final _suggestions = <WordPair>[];
      final _biggerFont = const TextStyle(fontSize: 18.0);
      // ···
    }

    Next, you’ll add a _buildSuggestions() function to the RandomWordsState class. This method builds the ListView that displays the suggested word pairing.

    The ListView class provides a builder property, itemBuilder, that’s a factory builder and callback function specified as an anonymous function. Two parameters are passed to the function—the BuildContext, and the row iterator, i. The iterator begins at 0 and increments each time the function is called. It increments twice for every suggested word pairing: once for the ListTile, and once for the Divider. This model allows the suggested list to grow infinitely as the user scrolls.

  2. Add a _buildSuggestions() function to the RandomWordsState class:

    lib/main.dart (_buildSuggestions)
    Widget _buildSuggestions() {
      return ListView.builder(
          padding: const EdgeInsets.all(16.0),
          itemBuilder: /*1*/ (context, i) {
            if (i.isOdd) return Divider(); /*2*/
    
            final index = i ~/ 2; /*3*/
            if (index >= _suggestions.length) {
              _suggestions.addAll(generateWordPairs().take(10)); /*4*/
            }
            return _buildRow(_suggestions[index]);
          });
    }
    1. The itemBuilder callback is called once per suggested word pairing, and places each suggestion into a ListTile row. For even rows, the function adds a ListTile row for the word pairing. For odd rows, the function adds a Divider widget to visually separate the entries. Note that the divider may be difficult to see on smaller devices.
    2. Add a one-pixel-high divider widget before each row in the ListView.
    3. The expression i ~/ 2 divides i by 2 and returns an integer result. For example: 1, 2, 3, 4, 5 becomes 0, 1, 1, 2, 2. This calculates the actual number of word pairings in the ListView, minus the divider widgets.
    4. If you’ve reached the end of the available word pairings, then generate 10 more and add them to the suggestions list.

    The _buildSuggestions() function calls _buildRow() once per word pair. This function displays each new pair in a ListTile, which allows you to make the rows more attractive in the next step.

  3. Add a _buildRow() function to RandomWordsState:

    lib/main.dart (_buildRow)
    Widget _buildRow(WordPair pair) {
      return ListTile(
        title: Text(
          pair.asPascalCase,
          style: _biggerFont,
        ),
      );
    }
  4. In the RandomWordsState class, update the build() method to use _buildSuggestions(), rather than directly calling the word generation library. (Scaffold implements the basic Material Design visual layout.) Replace the method body with the highlighted code:

    lib/main.dart (build)
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Startup Name Generator'),
        ),
        body: _buildSuggestions(),
      );
    }
  5. In the MyApp class, update the build() method by changing the title, and changing the home to be a RandomWords widget:

    {step3_stateful_widget → step4_infinite_list}/lib/main.dart
    @@ -6,15 +6,8 @@
    6 6class MyApp extends StatelessWidget {
    7 7@override
    8 8Widget build(BuildContext context) {
    9 9return MaterialApp(
    10- title: 'Welcome to Flutter',
    11- home: Scaffold(
    10+ title: 'Startup Name Generator',
    11+ home: RandomWords(),
    12- appBar: AppBar(
    13- title: Text('Welcome to Flutter'),
    14- ),
    15- body: Center(
    16- child: RandomWords(),
    17- ),
    18- ),
    19 12);
    20 13}
  6. Restart the app. You should see a list of word pairings no matter how far you scroll.

    App at completion of fourth step on Android
    Android
    App at completion of fourth step on iOS
    iOS

Problems?

If your app is not running correctly, you can use the code at the following link to get back on track.

Next steps

The app from part 2
The app from part 2

Congratulations!

You’ve written an interactive Flutter app that runs on both iOS and Android. In this codelab, you’ve:

  • Created a Flutter app from the ground up.
  • Written Dart code.
  • Leveraged an external, third-party library.
  • Used hot reload for a faster development cycle.
  • Implemented a stateful widget.
  • Created a lazily loaded, infinite scrolling list.

If you would like to extend this app, proceed to part 2 on the Google Developers Codelabs site, where you add the following functionality:

  • Implement interactivity by adding a clickable heart icon to save favorite pairings.
  • Implement navigation to a new route by adding a new screen containing the saved favorites.
  • Modify the theme color, making an all-white app.

最后更新:

类似资料

  • 本文向大家介绍详解Linux平台 Oracle 10gR2(10.2.0.5)RAC安装 Part1:准备工作,包括了详解Linux平台 Oracle 10gR2(10.2.0.5)RAC安装 Part1:准备工作的使用技巧和注意事项,需要的朋友参考一下 Linux平台 Oracle 10gR2(10.2.0.5)RAC安装 Part1:准备工作,具体如下: 环境:OEL 5.7 + Oracle

  • Android 进行单元测试难在哪-part1 原文链接 : Against Android Unit Tests 原文作者 : Matthew Dupree 译文出自 : 开发技术前线 www.devtf.cn 译者 : chaossss 校对者: tiiime 状态 : 完成 正如我在序中所说,在 Android 中难于进行测试是众多 Android 开发者的共识。上一篇博文发出后,有许多同行

  • 介绍 今天我将开始一个关于 Django 基础知识的新系列教程。这是一个完整的 Django 初学者指南。材料分为七个部分。我们将从安装,开发环境准备,模型,视图,模板,URL 到更高级主题(如迁移,测试和部署)来探索所有基本概念。 我想做一些不同的事情。一个教程,易于遵循,信息丰富和有趣的阅读。因此我想出了在文章中创建一些漫画的想法来说明一些概念和场景。希望你喜欢这种阅读方式! 但在我们开始之前

  • 背景:雪花新赞助KPL赛事,但目前没有在电竞粉丝心中留下印象,基于这些背景,雪花想借助新媒体平台来攻破粉丝圈层。 问题:如何在雪花的新媒体平台上通过日常运营以及外围事件打造吸引电竞粉丝?可以给到几个日常运营板块的建议以及外围玩法的推荐 我把我的回答总结成了文字,有电竞相关面试的同学可以看一些~ #校招# #新媒体运营#

相关阅读