【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part85 Scrolling
「 基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part85 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part84 Scrolling
引き続き、Scrollingについて学びます。
Scrolling
GridViewウィジェット
GridView.customコンストラクタ
GridView.custom
コンストラクタはグリッドビューを細かくカスタマイズするときに使用するコンストラクタのようです。
childrenDelegate
プロパティにSliverChildBuilderDelegate
を使うとGridView.bulder
コンストラクタに、SliverChildListDelegate
クラスを使用するとGridView
コンストラクタになるそうです。
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> {
List<String> images = [
"images/cat_nekoko.png",
"images/flutter_275x86.jpg",
"images/button.png",
"images/flutter.jpg",
"images/cat_nekoko.png",
"images/flutter_275x86.jpg",
"images/button.png",
"images/flutter.jpg",
];
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('テスト中です。'),
),
body: GridView.custom(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
childrenDelegate: SliverChildBuilderDelegate(
(context, index) {
return Image.asset(
images[index],
fit: BoxFit.cover,
);
},
childCount: 8,
),
padding: EdgeInsets.all(10),
shrinkWrap: true,
)),
);
}
}
だいぶ雑ですが見よう見まねで実装してみました。
最後に
細かくカスタマイズしたいときとはどんな時なのでしょう?
本件少し調べた際、興味深い記事を発見しました。
Flutter – GridViewを少し柔軟にしたい#1 – Qiita
なるほど。計算機の実装にGridView
を使うのか😮
勉強になりました。
今日はここまで!
参考
https://codesinsider.com/flutter-gridview-example/#GridViewcustom_Example_In_Flutter
ディスカッション
コメント一覧
まだ、コメントがありません