忘備録

Flutterグラフ挫折。サンプルコードで勉強する

Posted on by pasocafe00 / 0件のコメント

グラフライブラリのサンプルはなんとか動いたものの、コードを見ても何が何だか分からない！やっぱちゃんと勉強しないとね。ということで、Flutter Doc JPさんのチュートリアルで勉強することに。

https://flutter.ctrnost.com/tutorial/tutorial03/

チュートリアルがわかりやすく、知りたかった概要もわかったので、とても良かった。

一点、チュートリアルの４（外部パッケージ）でインストール指示の出ていたライブラリのバージョンが古くて、Null safetyに対応しておらず、エラーが出てしばらく悩んだ😭

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  english_words: ^4.0.0 # 追加した部分
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

// pubspec.yaml に追加して保存してDLされているかは
// ターミナルでflutter pub deps で調べられる
// 記事では3.1.0を指定していたがNullSaftyに対応していなくてエラーが出たので4.0.0にした

void main() => runApp(MyApp()); /*1*/

// ↑はワンライナーで書く方法↓の方が馴染みあるよね
// void main()  {
//   runApp(MyApp());
// }

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    /* 追加した */
    final wordPair = WordPair.random();

    return MaterialApp(
      // 名前付き引数を渡してMateriaAppのコンストラクタを呼ぶ
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          // child: Text('Hello World'),
          // child: Text(wordPair.asPascalCase),
          child: RandomWords(),
        ),
      ),
    );
  }
}

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

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

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

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

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

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

コメントする