CodeLabsのFlutterやってみた

最近流行ってるFlutterを触ってみました.

やったcodelabはこちらです↓↓

Write Your First Flutter App, part 1

SetUpから書いてるので基本的に順番通りやっていけばいいですし, 詰まないようにできてるので書く意味あるのかって感じですが, codelabいいなと思ったので｢やったんだぞ｣という意味もこめて笑

環境構築

Flutter SDKのインストール

こちらを参考にするとOKです.

flutter.io

Zipファイルを展開する場所はどこでもOKです. 展開した後は以下の一文を ~/.bash_profileに書くだけです

# Flutter
export PATH="/Users/ユーザー名/展開したディレクトリをおいている場所/flutter/bin:$PATH"

AndroidStudioにプラグインをインストール

コマンドラインからプロジェクト作成もできますが, AndroidStudioでも作成できるのでプラグインを入れると楽です.

Preferences => Plugins から Browse repositories... を押してFlutterプラグインを検索してインストールすれば FlutterProjectを作れるようになります.

躓いたところ

ありません

最終成果物はこちらです.

リストをこんな簡単に作れるのか〜〜と驚きました. DroidKaigiで ｢Flutterいいぞ〜〜｣と推している方が居たので触ってみましたが｢楽しそうだな｣というのはなんとなく掴みました笑

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart'; // Add this line.

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new RandomWords(),
    );
  }
}

class RandomWordsState extends State<RandomWords> {
  final List<WordPair> _suggestions = <WordPair>[];
  final TextStyle _biggerFont = const TextStyle(fontSize: 18.0);
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('StartUp Name Generator'),
      ),
      body: _buildSuggestions(),
    );
  }

  Widget _buildSuggestions() {
    return new ListView.builder(
      padding: const EdgeInsets.all(16.0),
      itemBuilder: (BuildContext _context, int i){
        if (i.isOdd) {
          return new Divider();
        }

        final int index = i ~/ 2;
        if (index >= _suggestions.length) {
          _suggestions.addAll(generateWordPairs().take(10));
        }

        return _buildRow(_suggestions[index]);
      },
    );
  }

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

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