はじめに
前回はFlutter Widget of the Weekの「#163 Completers」、「#164 mix」、「#165 Uint8List」を紹介しました。
今回はその続きで「#166 UnmodifiableListView」、「#167 MediaQuery.propertyOf」、「#168 video_player」の3つです。
前回の記事はこちら
またGitHubにも公開しています。
GitHub - nobushiueshi/flutter_widget_of_the_week
Contribute to nobushiueshi/flutter_widget_of_the_week development by creating an account on GitHub.
github.com
Flutter Widget of the Week
環境
- Flutter 3.23.3
記事にした時点でのバージョンです。GitHubに公開しているのは常に最新の安定版(stable)を使う予定です。
#166 UnmodifiableListView
UnmodifiableListViewとは？
UnmodifiableListViewは、リストに対する変更不可能な（読み取り専用の）ビューを提供する仕組みで、UI層などで意図せずデータが変更されることを防げます。
サンプルコード
import 'dart:collection';
import 'package:flutter/material.dart';
class SamplePage166 extends StatefulWidget {
const SamplePage166({super.key});
@override
State<SamplePage166> createState() => _SamplePage166State();
}
class _SamplePage166State extends State<SamplePage166> {
final model = SamplePage166Model();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('UnmodifiableListView'),
centerTitle: true,
),
body: SafeArea(
child: Center(
child: Text('items: ${model.items.length}'),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(model.add);
},
child: const Icon(Icons.add),
),
);
}
}
class SamplePage166Model {
SamplePage166Model();
final _items = ['Item 1', 'Item 2', 'Item 3'];
UnmodifiableListView<String> get items =>
UnmodifiableListView<String>(_items);
void add() {
_items.add('Item ${_items.length + 1}');
}
}
結果
動画
公式リファレンス
UnmodifiableListView class - dart:collection library - Dart API
API docs for the UnmodifiableListView class from the dart:collection library, for the Dart programming language.
api.dart.dev
#167 MediaQuery.propertyOf
MediaQuery.propertyOfとは？
MediaQuery.ofは、関心のあるデータが変更されたときにのみウィジェットを再ビルドさせることで、不要な再ビルドによるパフォーマンスの犠牲なしに最新のMediaQueryデータを取得するための仕組みです。
サンプルコード
import 'package:flutter/material.dart';
class SamplePage167 extends StatefulWidget {
const SamplePage167({super.key});
@override
State<SamplePage167> createState() => _SamplePage167State();
}
class _SamplePage167State extends State<SamplePage167> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('MediaQuery.propertyOf'),
),
body: Builder(
builder: (context) {
final orientation = MediaQuery.orientationOf(context);
final size = MediaQuery.sizeOf(context);
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('orientation: ${orientation.name}'),
Text('width: ${size.width}'),
Text('height: ${size.height}'),
],
),
);
},
),
);
}
}
結果
動画
公式リファレンス
MediaQuery class - widgets library - Dart API
API docs for the MediaQuery class from the widgets library, for the Dart programming language.
api.flutter.dev
#168 video_player
video_playerとは？
video_playerは、Flutterアプリ内で動画の再生、一時停止、シークなどの操作を管理し、動画の状態をウィジェットに反映させることができるパッケージです。
サンプルコード
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
class SamplePage168 extends StatefulWidget {
const SamplePage168({super.key});
@override
State<SamplePage168> createState() => _SamplePage168State();
}
class _SamplePage168State extends State<SamplePage168> {
late VideoPlayerController _controller;
@override
void initState() {
super.initState();
_controller =
VideoPlayerController.networkUrl(
Uri.parse(
'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4',
),
)
..initialize().then((_) {
// Ensure the first frame is shown after the video is initialized,
// even before the play button has been pressed.
setState(() {});
});
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('video_player'),
),
body: SafeArea(
child: Center(
child: _controller.value.isInitialized
? AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(_controller),
)
: Container(),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_controller.value.isPlaying
? _controller.pause()
: _controller.play();
});
},
child: Icon(
_controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
),
),
);
}
}
結果
動画
公式リファレンス
video_player | Flutter package
Flutter plugin for displaying inline video with other Flutter widgets on Android, iOS, macOS and web.
pub.dev
さいごに
またサボってしまっていた。。。
おすすめ参考書
リンク
GitHub - nobushiueshi/flutter_widget_of_the_week
Contribute to nobushiueshi/flutter_widget_of_the_week development by creating an account on GitHub.
github.com
コメント