Created
March 24, 2018 13:26
-
-
Save toshimasa-nanaki/80ce1b84c78c55580525b7888a3ce521 to your computer and use it in GitHub Desktop.
flutterアプリを作ってみたい6-1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
import 'package:english_words/english_words.dart'; | |
void main() => runApp(new MyApp()); | |
class MyApp extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return new MaterialApp( | |
title: '名前ジェネレーター', | |
home: new RandomWords(), | |
); | |
} | |
} | |
class RandomWords extends StatefulWidget { | |
@override | |
createState() => new RandomWordsState(); | |
} | |
class RandomWordsState extends State<RandomWords> { | |
final _suggestions = <WordPair>[]; | |
final _saved = new Set<WordPair>(); | |
final _biggerFont = const TextStyle(fontSize: 18.0); | |
@override | |
Widget build(BuildContext context) { | |
return new Scaffold( | |
appBar: new AppBar( | |
title: new Text('名前ジェネレーター'), | |
/// (1) アプリケーションバーに一覧アイコンを追加します。 | |
/// actionsプロパティはWidgetの配列で扱います。 | |
/// アイコンを押したときの動作は(2)へ | |
actions: <Widget>[ | |
new IconButton(icon: new Icon(Icons.list), onPressed: _pushSaved), | |
], | |
), | |
body: _buildSuggestions(), | |
); | |
} | |
Widget _buildSuggestions() { | |
return new ListView.builder( | |
padding: const EdgeInsets.all(16.0), | |
itemBuilder: (context, i) { | |
if (i.isOdd) return new Divider(); | |
final index = i ~/ 2; | |
if (index >= _suggestions.length) { | |
_suggestions.addAll(generateWordPairs().take(10)); | |
} | |
return _buildRow(_suggestions[index]); | |
}); | |
} | |
Widget _buildRow(WordPair pair) { | |
final alreadySaved = _saved.contains(pair); | |
return new ListTile( | |
title: new Text( | |
pair.asPascalCase, | |
style: _biggerFont, | |
), | |
trailing: new Icon( | |
alreadySaved ? Icons.favorite : Icons.favorite_border, | |
color: alreadySaved ? Colors.red : null, | |
), | |
onTap: () { | |
setState(() { | |
if (alreadySaved) { | |
_saved.remove(pair); | |
} else { | |
_saved.add(pair); | |
} | |
}); | |
}, | |
); | |
} | |
/// (2)一覧アイコンをクリックしたときの動作です。 | |
void _pushSaved() { | |
/// (3)Navigatorスタックに新ルートをプッシュします。 | |
Navigator.of(context).push( | |
/// (4)新ルートはMaterialPageRouteから作成します。 | |
new MaterialPageRoute( | |
// (5)新しいルートのコンテンツ(中身)は無名関数であるbuilderプロパティで作ります。 | |
builder: (context) { | |
/// (6) _saved変数(お気に入り登録したリスト)の中身それぞれでListTileを生成します。 | |
final tiles = _saved.map( | |
(pair) { | |
return new ListTile( | |
title: new Text( | |
pair.asPascalCase, | |
style: _biggerFont, | |
), | |
); | |
}, | |
); | |
/// (7)生成したtilesにListTile.divideTiles()を利用して、水平方向の間隔を追加し、一覧化した状態で | |
/// divided定数に代入します。 | |
final divided = ListTile | |
.divideTiles( | |
context: context, | |
tiles: tiles, | |
) | |
.toList(); | |
/// (8) あとは、普通のbuilder関数と一緒。 | |
/// appbarは「お気に入り一覧」、bodyは上で作ったdivided変数を利用する。 | |
return new Scaffold( | |
appBar: new AppBar( | |
title: new Text('お気に入り一覧'), | |
), | |
body: new ListView(children: divided), | |
); | |
}, | |
), | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment