【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part87 Scrolling
「 基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part87 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part86 Scrolling
引き続き、Scrollingについて学びます。
Scrolling
SingleChildScrollViewウィジェット
SingleCildScrollView
ウィジェットはウィジェットの大きさが端末の表示領域以上になる場合にスクロールできるようにするウィジェットです。
ほとんどのアプリケーションで使用する必須のウィジェットですよね😄
失敗
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",
"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",
"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",
"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: SingleChildScrollView(
child: GridView.custom(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 3,
),
childrenDelegate: SliverChildBuilderDelegate(
(context, index) {
return Image.asset(
images[index],
fit: BoxFit.cover,
);
},
childCount: 28,
),
padding: EdgeInsets.all(10),
shrinkWrap: true,
)),
),
);
}
}
画面が表示されたので「お?」と思ったのですがスクロールは動作せず・・・。
成功
無難にColumn
ウィジェットを使用しました。
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: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
box("1"),
box("2"),
box("3"),
box("4"),
box("5"),
box("6"),
box("7"),
],
),
),
));
}
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),
);
}
}
こんな感じでスクロールしました。なんとか動いてよかった😅
最後に
これは必須ウィジェットですね!
今日はここまで!
ディスカッション
コメント一覧
まだ、コメントがありません