【 Flutter 】Flutter を 基礎 から 学習 ( Material ComponentsとiOS-Style ) part131 Material Components

import 'package:flutter/material.dart';

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

class MyHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyHomePageState();
  }
}

class _MyHomePageState extends State<MyHomePage> {
  bool dark = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: dark ? ThemeData.dark() : ThemeData.light(),
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true, // タイトルが中央になります。
          title: Text('Toggle theme sample'),
          // SliverAppBarにも同じプロパティがあります。
          // flexibleSpace: ,
        ),
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              // falseにするとリスト最上部に達した段階でヘッダーが最大サイズになるのですが、
              // trueにすると達していなくても最大サイズになります。
              floating: true,

              // pinnedをfalseにするとスクロールとともに完全に無くなります。
              pinned: true,

              // 広がっている状態の高さの設定です。
              expandedHeight: 200.0,

              // AppBarにも同様のプロパティがあります。
              flexibleSpace: FlexibleSpaceBar(
                // ヘッダ部分が狭くなった時にtitleで指定した文字を表示します。
                title: const Text('FlexibleSpaceBar'),
                // タイトルが中央になります。
                centerTitle: true,
                // ヘッダが拡大した際のウィジェットを指定します。
                background: Stack(
                  fit: StackFit.expand,
                  children: <Widget>[Image.asset('images/cat_nekoko.png')],
                ),
              ),
            ),
            SliverList(
              // スクロールする部分以上するクラスを指定します。
              delegate: SliverChildBuilderDelegate(
                (BuildContext content, int index) {
                  return ListTile(
                    title: Text('Item $index'),
                  );
                },
                childCount: 30,
              ),
            ),
          ],
        ),
      ),
    );
  }
}