【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part88 Scrolling

基礎 から 学ぶ Flutter 」という書籍で  学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part88 )です。

前回

【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part87 Scrolling

引き続き、Scrollingについて学びます。

Scrolling

PageViewウィジェット

PageViewウィジェットはフリックでページを移動できるウィジェットのようです。

HTMLでいうところのページング(ページネイト・ページネーション・ページ送り)みたいなものでしょうかね?

コンストラクタ

import 'dart:math' as math;

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new MyApp()));
}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _State();
  }
}

class _State extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text('テスト中です。'),
      ),
      body: PageView(
        children: <Widget>[
          box("1"),
          box("2"),
          box("3"),
        ],
      ),
    ));
  }

  Container box(String text) {
    return Container(
      alignment: Alignment.center,
      width: 100,
      height: 200,
      color: Color((math.Random().nextDouble() * 0xFFFFFF).toInt())
          .withOpacity(1.0),
      child: Text(text),
    );
  }
}

 

フリックするとウィジェットが切り替わっているのがわかります。

最後に

画面の切り替わりが簡単に実装できるとは・・・いい時代になりました。

今日はここまで!

 

参考

HTMLページにページネーションを簡単に実装する (shu-sait.com)

国内トピックス一覧 – Yahoo!ニュース