Flutter 첫번째 앱 작성

출처 https://docs.flutter.dev/get-started/codelab

Write your first Flutter app, part 1

Step 1: Create the starter Flutter app

< What you’ll learn in part 1 >

How to write a Flutter app that looks natural on iOS, Android, desktop (Windows, for example), and the web
Basic structure of a Flutter app
Finding and using packages to extend functionality
Using hot reload for a quicker development cycle
How to implement a stateful widget
How to create an infinite, lazily loaded list

 

// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

 

Tip: 문서 Formatter

• VS Code: Right-click and select Format Document.
• Terminal: Run flutter format <filename>.

 Tip: 처음엔 시간 걸리지만, 이후 저장하면 바로 Hot reload가 됨

      The first time you run on a physical device, it can take a while to load.

      Afterward, you can use hot reload for quick updates. 

      Save also performs a hot reload if the app is running.

      When running an app directly from the console using flutter run, enter r to perform hot reload.

 

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. It’s a good idea to have a uses-material-design: true entry in the flutter section of your pubspec.yaml file. This will allow you to use more features of Material, such as their set of predefined Icons.
• 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, 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

1. Add english_words package to your project as follows:

 $ flutter pub add english_words

The pubspec.yaml file manages the assets and dependencies for a Flutter app. In pubspec.yaml, you will see that the english_words dependency has been added:             

99	  dependencies:
10	    flutter:
11	      sdk: flutter
12	    cupertino_icons: ^1.0.2
13	+   english_words: ^4.0.0

 

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

import 'package:english_words/english_words.dart';

 

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

 

 Note: “Pascal case” (also known as “upper camel case”), means that each word in the string, including the first one, begins with an uppercase letter. So, “uppercamelcase” becomes “UpperCamelCase”.

 

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 and can be thrown away and regenerated,

but the State class persists over the lifetime of the widget.

 

1. Create the boilerplate code for a stateful widget.
   In lib/main.dart, position your cursor after all of the code, enter Return a couple times to start on a fresh line. In your IDE, start typing stful. The editor asks if you want to create a Stateful widget. Press Return to accept. The boilerplate code for two classes appears, and the cursor is positioned for you to enter the name of your stateful widget.
2. Enter RandomWords as the name of your widget.
   The RandomWords widget does little else beside creating its State class.
   
   Once you’ve entered RandomWords as the name of the stateful widget, the IDE automatically updates the accompanying State class, naming it _RandomWordsState. By default, the name of the State class is prefixed with an underbar. Prefixing an identifier with an underscore enforces privacy in the Dart language and is a recommended best practice for State objects.

    The IDE also automatically updates the state class to extend State<RandomWords>, indicating that you’re using a generic State class specialized for use with RandomWords. Most of the app’s logic resides here—it maintains the state for the RandomWords widget. This class saves the list of generated word pairs, which grows infinitely as the user scrolls and, in part 2 of this lab, favorites word pairs as the user adds or removes them from the list by toggling the heart icon.

 

3. Update the build() method in _RandomWordsState:

4. Remove the word generation code from MyApp by making the changes shown in the following diff:

5. Restart the app. The app should behave as before, displaying a word pairing each time you hot reload or save the app.

 

 Tip: If you see a warning on a hot reload that you might need to restart the app, consider restarting it. The warning might be a false positive, but restarting your app ensures that your changes are reflected in the app’s UI.

 

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.

 

...