Dart/flutter勉強中【コードメモ002】

もちろん、ゲームくらい複雑になったらgitに上げるよ！

下のコードが教えてくれること

• Class Import
• ボタンにfunctionを渡す
• statelessの内部データ消すと、一緒に描画用widgetのquote_cardも消える。ちょっと疑問だから後で調べます（空っぽの状態のカードが残るのかなと思っていた）

⇛冷静にコードを見直すと、
１：リストから要素が一つ消える。
２：setStateの呼び出しとリストの要素が消えたことによってbuildが走る
３：build内部でListViewが要素を一つ一つ作り直す。このときリストのサイズが小さくなっている（要素が消えている）のでその要素に対してのつくりなおしが走らない
４：内部データを消したことによって、カード自体が作られないので、空っぽのカードが残るようなことはない。

コメント：ListViewの完全作り直しが毎回毎回走るとなると重そうだ。

main.dart

import 'package:flutter/material.dart';
import 'package:quotes/quote_card.dart';
import 'quote.dart';

void main() => runApp(MaterialApp(
      home: QuoteList(),
    ));

class QuoteList extends StatefulWidget {
  @override
  _QuoteListState createState() => _QuoteListState();
}

class _QuoteListState extends State<QuoteList> {
  List<Quote> quotes = [
    Quote(
        author: "Oscar Wild",
        text: "Be yourself; everyone else is already taken"),
    Quote(
        author: "Oscar Wild",
        text: "I have nothing to declare except my genius"),
    Quote(
        author: "Oscar Wild",
        text: "The truth is rarely pure and never simple"),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],
      appBar: AppBar(
        title: Text("Awesome Quotes"),
        centerTitle: true,
        backgroundColor: Colors.redAccent,
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: quotes
            .map((quote) => QuoteCard(
                quote: quote,
                delete: () {
                  setState(() {
                    quotes.remove(quote);//疑問：内部のデータだけを消したのに、描画まで一緒に消えるのはなんでだろう？
                  });
                }))
            .toList(),
      ),
    );
  }
}

quote_card.dart

import 'package:flutter/material.dart';
import 'package:quotes/quote.dart';

class QuoteCard extends StatelessWidget {

  final Quote quote;
  final Function delete;
  QuoteCard({this.quote,this.delete});

  @override
  Widget build(BuildContext context) {
    return Card(
      margin:EdgeInsets.fromLTRB(16, 16, 16, 0),
      child: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: <Widget>[
            Text(
              quote.text,
              style: TextStyle(
                fontSize: 20,
                color: Colors.grey[600],
              ),
            ),
            SizedBox(height:10),
            Text(
              quote.author,
              style: TextStyle(
                fontSize: 16,
                color: Colors.grey[800],
              ),
            ),
            SizedBox(height:8),
            FlatButton.icon(
              onPressed: delete,
              label: Text('delete quote'),
              icon: Icon(Icons.delete),
            )
          ],
        ),
      ),
    );
  }
}

quote.dart

class Quote{
  String text;
  String author;

  Quote({this.text,this.author});
}
//引数に{}つけると順不同で良くなる代わりに、パラメーター指定が必要になります
//つけなければ、順序が大事な感じなります。
//メソッドの引数複数パターン書かなくていいのは素晴らしいね
//例：Quote myQuote = Quote(text:"hoge",author: "hoge");