null safety article
In the introduction to unit testing recipe, you learned how to test Dart classes using the test package. To test widget classes, you need a few additional tools provided by the flutter_test…
null safety article
https://pub.dev/packages/animations/example
pub.devのanimationsパッケージのページにサンプルコード(へのリンク)がありますが、少し複雑なので、もう少し簡単なもので使ってみて、利用方法を整理したいと思います。
スタート地点。
https://pub.dev/packages/animations/install
↑の通りanimationsパッケージの依存関係をpubspec.yamlで宣言しましょう。
//main.dart
import 'package:flutter/material.dart';
import 'package:animations/animations.dart';
//↑animationsパッケージが必要なのでインポートする。
void main() {
runApp(
MaterialApp(
home: MyApp(),
),
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: …
null safety article
ほとんどのWebサービスからデータをフェッチするには、認証を提供する必要があります。これを行うには多くの方法がありますが、おそらく最も一般的な方法はAuthorizationHTTPヘッダーを使用します。
このhttpパッケージは、リクエストにヘッダーを追加するための便利な方法を提供します。
または、dart:ioライブラリのHttpHeaders クラスを使用する方法もあります。
Future<http.Response> fetchAlbum() {
return http.get(
'https://jsonplaceholder.typicode.com/albums/1',
// Send authorization headers to 翻訳機能で特に問題無いと思われますので、訳は無しです。
Swipe to dismissの機能のみならこのページの通りで良いと思いますが、
flutter_slidable (Flutter favorite)
というパッケージを使うと、swipe to dismissに加えて追加の機能を実装できます。
参考
…
null safety article
UI開発者は、多くの場合、画面上の要素を表示および非表示にする必要があります。
ただし、要素を画面の内外にすばやくポップすると、エンドユーザーに違和感を与える可能性があります。
代わりに、不透明度(opacity)アニメーションを使用して要素をフェードインおよびフェードアウトして、スムーズなエクスペリエンスを作成します。
AnimatedOpacityウィジェットは、それが簡単に不透明度(opacity)アニメーションを行うことが可能となります。このレシピでは、次の手順で進めていきます。
1.フェードイン、フェードアウトさせる対象となるボックスを定義します。
2.StatefulWidgetを定義します。
3.フェードイン/アウトを切り替えるボタンを用意します。
4.ボックスをフェードイン/アウトさせます。
まず、フェードインおよびフェードアウトするものを作成します。この例では、画面に緑色のボックスを描画します。
Container(
width: 200.0,
height: 200.0,
color: Colors.Navigator.pushメソッドでページ遷移する場合、第2引数で指定するウィジェットのコンストラクタに渡したいものを渡せば、ページ遷移時の引数渡しができる。
↑でできるのだが、この方法だと遷移先クラス(DetailScreen)内で受け取ったオブジェクトを保持するフィールド(todo)を宣言する必要がある。
それをしたくない場合は、遷移元でNavigator.pushメソッド内で渡したいものを指定して、遷移先ではModalRoute.ofを使って受け取る方法もある。
named routeの場合も全体的にはやり方は似ているが、微妙に違うので整理する必要がある。
多くの場合、新しい画面に移動するだけでなく、データを画面に渡したい場合もあります。
たとえば、タップされたアイテムに関する情報を(遷移先ページへ)渡したい場合があります。
思い出してください。：画面は単なるウィジェットです。
この例では、ToDoのリストを作成します。ToDoリストのアイテムをタップすると、ToDoに関する情報を表示する新しい画面（ウィジェット）に移動します。このレシピでは、次の手順を使用します。
まず、ToDoを表す簡単な方法が必要です。この例では、タイトル(title)と説明(description)の2つのデータを含むクラスを作成します。
class Todo {
final String title;
final String(A)MaterialAppのroutesプロパティでルートテーブル指定+ModalRoute.ofで受け取る方法。
(B)MaterialAppのonGenerateRouteプロパティでルートテーブル指定+onGenerateRouteコールバック内で受け取り遷移先ウィジェットに渡す方法。
(1)遷移元からページ遷移するコード
=>(A)も(B)も全く同じ。
Navigator.pushNamed
メソッドを使う。
Navigator.pushNamed(
context,
ExtractArgumentsScreen.routeName,
arguments: ScreenArguments(
'Extract Arguments Screen',
'This message is extracted in the build method.',
),
);
(2)ルートテーブルの指定方法
=>(A) : MaterialAppのroutesプロパティで指定する。(受け取るのは遷移先ウィジェット内)
return MaterialApp(
//...
routes: {
ExtractArgumentsScreen.routeName: (context) =>
ExtractArgumentsScreen(),
});
…
前回のレシピでは、新しいルートを作成してNavigatorにプッシュすることで、新しい画面に移動する方法を学習しました
ただし、アプリの多くの部分で同じ画面に移動する必要がある場合、このアプローチではコードが重複する可能性があります。
解決策は、名前付きルートを定義し、ナビゲーションに名前付きルートを使用することです。
名前付きルートを操作するには、Navigator.pushNamed()メソッドを使用します。
この例では、元のレシピの機能を複製し、次の手順を使用して名前付きルートを使用する方法を示します。
Navigator.pushNamed()を使用してSecondScreenに移動します。Navigator.pop()を使用してFirstScreenに戻ります。まず、操作する2つの画面を作成します。
最初の画面(FirstScreen)には、2番目の画面に移動するボタンが含まれています。
2番目の画面(ScondScreen)には、最初の画面に戻るためのボタンが含まれています。
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext