첫 Flutter app 만들기

첫 앱을 만들어보자. 먼저 Flutter site에 있는 예제로 시작을 해보려고 한다.

플러터 사이트를 보고 따라하고 싶으면 이곳으로 이동해서 첫 앱을 만들어봐도 좋다.


먼저 만들고자 하는 앱은 이름을 생성하는 앱이다. 이름을 선택하거나 취소할 수 있고, 가장 좋은 이름을 저장할 수 있다. 이름은 스크롤 할수록 계속 생성이 된다. 안드로이드 스튜디오를 기준으로 작성을 한다.



Step 1. Start a new Flutter project로 플러터 프로젝트를 생성 후, 프로젝트 이름은 플러터 예제에서 하라는데로 startup_namer로 적어줬다.

Step 2. lib/main.dart코드를 수정하자. 기존꺼 다 지우고 아래 코드를 복사합시다.

// 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';
import 'package:english_words/english_words.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text(wordPair.asPascalCase),
        ),
      ),
    );
  }
}

Step 3. pubspec.yaml 파일을 수정하여 외부 패키지를 이용하자.

사용하려는 외부 패키지는 english_words 이다. (여기 참고) 현재 최신 버전은 3.1.5다.

아래처럼 english_words: ^3.1.5를 추가한다.

dependencies:
  flutter:
    sdk: flutter
  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.3
  english_words: ^3.1.5

* 주의할 점: yaml 파일을 수정할 때 중요한건 "띄어쓰기"이다. 

Step 4. Pub get을 선택하면 해당 패키지를 다운로드 받는다. 

다운로드 된 패키지는 Dart Packages 하위에 위치하게 된다.

Step 5. 외부패키지를 다운로드 했으니 import를 해주자.

import 'package:english_words/english_words.dart';

Step 6. 이름을 랜덤으로 생성해보자.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text(wordPair.asPascalCase),
        ),
      ),
    );
  }
}

Step 7. 실행해보면 이렇게 나온다.

Step 8. Stateful widget을 추가해보자.

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

class RandomWords extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => RandomWordsState();
}

class RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    return Text(wordPair.asPascalCase);
  }
}

Step 9. ListView를 추가해보자

class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];
  final _biggerFont = const TextStyle(fontSize: 18.0);

  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    return Text(wordPair.asPascalCase);
  }

  Widget _buildSuggetions() {
    return ListView.builder(
        padding: const EdgeInsets.all(6.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]);
        });
  }
  
  Widget _buildRow(WordPair pair) {
    return ListTile(
      title: Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
    );
  }
}

* 참고 : Dart 언어에서 식별자 앞에 '_'을 붙이면 private이 적용된다.



Step 10. Scaffold를 제거하고, RandomWords로 변경해보자.

// 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';
import 'package:english_words/english_words.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Startup Name Generator',
      home: RandomWords(),
    );
  }
}

class RandomWords extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => RandomWordsState();
}

class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];
  final _biggerFont = const TextStyle(fontSize: 18.0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Startup Name Generator'),
      ),
      body: _buildSuggestions(),
    );
  }

  Widget _buildSuggestions() {
    return ListView.builder(
        padding: const EdgeInsets.all(6.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]);
        });
  }

  Widget _buildRow(WordPair pair) {
    return ListTile(
      title: Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
    );
  }
}

Step 11. 최종 결과 화면

#플러터앱 #flutter app