RSS2.0

Flutter ver 0.3.2 の、無限スクロールする GridView のサンプル

『The Infinite ListView』等で Google 検索すると無限スクロールする ListView については情報がえられるのですが、同じようなことを GridView でやっているサンプルは見つからなかったので書いておきます。言うならば、The Infinite GridView のサンプルです。Flutter は ver 0.3.2 を利用しています。
infinite_scroll_gridview.png
無限スクロールに関しては、やっていることは無限スクロール ListView と同じです。なので GridView のサンプルではありますが、同じ方法論で無限スクロール ListView も作ることができます。

機能としては、以下を実装しています。
・GridView を末尾までスクロールすると、次のデータを新たに作成して追加表示する
・GridView の要素は、表示されるタイミングで構築(遅延構築)される
・GridView の要素は 1 列で 3 個ずつ並べられる

以下がサンプルコードになります。
import 'package:flutter/material.dart';

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

/// 無限にスクロールする GridView サンプルの StatefulWidget
class InfiniteGridViewSampleWidget extends StatefulWidget {
  @override
  InfiniteGridViewSampleState createState() =>
      new InfiniteGridViewSampleState();
}

/// 無限にスクロールする GridView サンプルの State
class InfiniteGridViewSampleState extends State<InfiniteGridViewSampleWidget> {
  // 表示するデータの List。
  // 初期値としてデータを 20 件いれておく。
  final List<int> items = new List.generate(20, (index) => index);

  // GridView を構築して返す。
  // この GridView を末尾までスクロールした場合、表示するデータ件数を増やして追加表示できるようにする。
  //
  // GridView が末尾までスクロールされたかは、GridView に設定した ScrollController によって検知できる。
  //
  // GridView に表示される要素の最大数は、GridView が構築された時点で固定される。
  // そのため、表示するデータ件数を増やすには、再度 GridView を再構築する必要がある。
  @override
  Widget build(BuildContext context) {
    // GridView のスクロールを検知するための ScrollController。
    final ScrollController _scrollController = new ScrollController();
    // ScrollController にイベントリスナーを設定する。
    _scrollController.addListener(() {
      // 最後までスクロールしたら、次のデータを読み込む。
      if (_scrollController.position.maxScrollExtent <=
          _scrollController.position.pixels) {
        // 表示するデータを追加し、ウィジェットを再構築するよう通知する。
        setState(() {
          // 表示するデータにさらに 20 件データを追加する。
          this.items.addAll(
              new List.generate(20, (index) => this.items.length + index));
        });
      }
    });

    // GridView の要素を表示されるタイミングで構築できるように itemBuilder を指定する。
    return new MaterialApp(
      home: new Scaffold(
        // itemBuilder を指定できる GridView.builder() で GridView を構築する。
        body: GridView.builder(
          itemBuilder: (BuildContext context, int index) {
            // itemBuilder は、引数 index の位置にある GridView の要素が表示されるタイミングで
            // 呼び出され、その要素を構築して返す。

            print("make item: ${index}");

            // 引数 index の位置にある GridView の要素を構築して返す。
            return new Center(child: new Text("#${index}"));
          },
          // GridView で表示するデータの件数を設定する。
          // これ以上の件数のデータを表示する場合、新たな itemCount 値を設定して GridView を再構築する必要がある。
          itemCount: items.length,
          // スクロールされたことを検知するため、ScrollController を設定する。
          controller: _scrollController,
          // GridView の要素は横に 3 個ずつ並べてレイアウトする。
          // これは、new GridView.count(crossAxisCount: 3, children: <Widget>[]) に相当する。
          // GridView の要素の配置は SliverGridDelegateWithFixedCrossAxisCount を設定することで指定できる。
          gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
          ),
        ),
      ),
    );
  }
}

続きを読む FlutterDart  コメント (0) 2018/05/17 19:11:40

Dart 非同期処理の async / await について

Flutter でのアプリ開発にあたって Dart 言語を順序立って体系的に学ぶ余裕がなかったこともあり、必要になるポイント毎に言語仕様を調べていました。しかし、とうとう非同期処理で利用される await キーワードの動作について納得できない事象に遭遇し、きちんと調べ直すことにしました。今日は調べ直した Dart 言語の非同期処理について書いてみたいと思います。

事の発端: await をつけているのに処理が進んでしまう

Dart には await というキーワードがあり、非同期処理を行うメソッドの呼び出し時に追記することで、メソッド内部の非同期処理の完了を待つことができます。
以下のように書いた場合、sumNumber() メソッドの内容が非同期処理であっても、返り値を i で受け取るまで、その先に処理は進みません。
var i = await sumNumber();
これについては Dart の言語仕様を正しい理解したものですが、await をとりまく言語仕様について、もう少し考慮しなければならない点がありました。

例えば以下のようなコードを実行すると、どのように標準出力されるでしょうか。
import 'dart:async';

main() {
  ready();
  countDown();
  go();
}

void ready() {
  print("Ready set...");
}

void countNumber(number) {
  print(number);
}

void countDown() async {
  // ここで await を使って待機したい
  await countNumber(3);
  countNumber(2);
  countNumber(1);
}

void go() {
  print("Go!!");
}

await で処理が止まるので、
Ready set...
3
2
1
Go!!
となりそうですが、実際には以下のように出力されます。
Ready set...
Go!!
3
2
1
上記ソースコードからのこの出力結果が納得できない方が今回の対象読者です。私もこの記事を書くまで納得できませんでした。
続きを読む FlutterDart  コメント (1) 2018/05/14 20:09:51

Flutter の showModalBottomSheet() のサンプル

先週触り始めた Flutter (バージョン 0.2.8) ですが、ModalBottomSheet と呼ばれるウィジェットを使うのに苦労したので、動いたコードをサンプルとして載せて置こうと思います。

ModalBottomSheet はスマホの画面の底辺から上に向かってにょきっと出てくるダイアログの一種です。Android や iPhone で文字を入力しようとした時に出てくるキーボードみたいなやつです。
以下のスクリーンショットを見てもらうとイメージしやすいと思います。これが今回のサンプルコードの実行結果です。
flutter_showModalBottomSheet1.pngflutter_showModalBottomSheet2.png
もともと表示されていたウィジェットに重ねて表示されること、画面下からスライドして表示されること、スマホのディスプレイの形状にかかわらず、上辺以外が埋め尽くされた形のダイアログになっていることが特徴です。3 点めの、上辺以外が埋め尽くされた形のダイアログであることが特にユニークな特徴で、最近の iPhone のようにディスプレイの下辺の角が丸まっていたりすると、普通のダイアログウィジェットでは高さを最大にしても角が丸まっている領域まで広がらないのです。非矩形なダイアログを作ることができないのでしょうね。

続きを読む FlutterDart  コメント (1) 2018/04/25 16:41:09

Flutter / Dart 言語で Android 用開発環境を構築する

Flutter は Google 製のハイクオリティな UI フレームワークです。Android と iOS の 2 つのプラットフォームで同時に開発ができ、そのため使用言語は Java でも Swift でもなく、Dart という言語になります。クロスプラットフォーム開発という点では以前試した Ionic 2 と同じようなコンセプトにも聞こえますが、Ionic 2 と異なりネイティブアプリの開発を前提としているようです。

ハイクオリティというからにはどのくらいハイクオリティなのか試してやろうということで、今回は開発環境の構築からアプリを起動するところまでをやってみたいと思います。
ちなみに開発環境はいつもどおり Fedora 26 64bit 版です。なので iOS でアプリを動かすのはいったんおいておいて、Android アプリを起動するところまでがゴールとなります。公式サイトに環境毎の開発環境構築手順が載っているので、Linux 用のドキュメントをベースに進めてみます。

Flutter の開発環境を構築する

Flutter での開発環境を構築するには、Flutter の他に Android や iOS の開発環境も準備しておく必要があります。
冒頭に記載したとおり、今回は Android アプリを動かすことを目標としているので、Android Studio を使って Android 版の開発環境だけを作っていきます。

Flutter をインストールする

それでは Flutter からインストールしていきます。
公式サイトからLinux 用 Flutterをダウンロードし、展開します。現時点での最新バージョンは 0.2.8-beta でした。
$ wget https://storage.googleapis.com/flutter_infra/releases/beta/linux/flutter_linux_v0.2.8-beta.tar.xz
$ tar xf flutter_linux_v0.2.8-beta.tar.xz
# mv flutter /usr/local/
ここでは展開した flutter を /usr/local 配下に配置しています。
続きを読む FlutterDart  コメント (0) 2018/04/19 13:24:41
プロフィール HN: ももかん
ゲーム作ったり雑談書いたり・・・していた時期が私にもありました。
カレンダー
<<2024, 11>>
272829303112
3456789
10111213141516
17181920212223
24252627282930