2021/3/20 Flutter : Tap, drag, and enter textの訳

null safety article

Tap, drag, and enter text

Many widgets not only display information, but also respond to user interaction. This includes buttons that can be tapped, and TextField for entering text.

多くのウィジェットは、情報を表示するだけでなく、ユーザーの操作にも応答します。これには、タップできるボタンや、テキストを入力できるTextFieldが含まれます

 …

2021/3/20 : Flutter : Find widgetsの訳

null safety article

Find widgets

To locate widgets in a test environment, use the Finder classes.

テスト環境でウィジェットを見つけるには、Finder クラスを使用します。

 

While it’s possible to write your own Finder classes, it’s generally more convenient to locate widgets using the …

2021/3/18 : Flutter : animationsパッケージのOpenContainerウィジェットを使ってみる。

 

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: 

2021/3/16 : Flutter : Make authenticated requestsについて

 

null safety article

Make authenticated requests

ほとんどのWebサービスからデータをフェッチするには、認証を提供する必要があります。これを行うには多くの方法がありますが、おそらく最も一般的な方法はAuthorizationHTTPヘッダーを使用します。


Add authorization headers

このhttpパッケージは、リクエストにヘッダーを追加するための便利な方法を提供します。

または、dart:ioライブラリのHttpHeaders クラスを使用する方法もあります。

Future<http.Response> fetchAlbum() {
  return http.get(
    'https://jsonplaceholder.typicode.com/albums/1',
    // Send authorization headers to 

2021/3/15 : Flutter : Fade a widget in and outの訳

 

null safety article

Fade a widget in and out

UI開発者は、多くの場合、画面上の要素を表示および非表示にする必要があります。

ただし、要素を画面の内外にすばやくポップすると、エンドユーザーに違和感を与える可能性があります。

代わりに、不透明度(opacity)アニメーションを使用して要素をフェードインおよびフェードアウトして、スムーズなエクスペリエンスを作成します。

AnimatedOpacityウィジェットは、それが簡単に不透明度(opacity)アニメーションを行うことが可能となります。このレシピでは、次の手順で進めていきます。

1.フェードイン、フェードアウトさせる対象となるボックスを定義します。

2.StatefulWidgetを定義します。

3.フェードイン/アウトを切り替えるボタンを用意します。

4.ボックスをフェードイン/アウトさせます。


1. Create a box to fade in and out

まず、フェードインおよびフェードアウトするものを作成します。この例では、画面に緑色のボックスを描画します。

Container(
  width: 200.0,
  height: 200.0,
  color: Colors.

2021/3/13 : Flutter : Send data to a new screenの訳

まとめ

Navigator.pushメソッドでページ遷移する場合、第2引数で指定するウィジェットのコンストラクタに渡したいものを渡せば、ページ遷移時の引数渡しができる。

↑でできるのだが、この方法だと遷移先クラス(DetailScreen)内で受け取ったオブジェクトを保持するフィールド(todo)を宣言する必要がある。

それをしたくない場合は、遷移元でNavigator.pushメソッド内で渡したいものを指定して、遷移先ではModalRoute.ofを使って受け取る方法もある。

named routeでの渡し方についてはこちら。

named routeの場合も全体的にはやり方は似ているが、微妙に違うので整理する必要がある。


Send data to a new screen

多くの場合、新しい画面に移動するだけでなく、データを画面に渡したい場合もあります。

たとえば、タップされたアイテムに関する情報を(遷移先ページへ)渡したい場合があります。

思い出してください。:画面は単なるウィジェットです。

この例では、ToDoのリストを作成します。ToDoリストのアイテムをタップすると、ToDoに関する情報を表示する新しい画面(ウィジェット)に移動します。このレシピでは、次の手順を使用します。

  1. todoクラスを定義します。
  2. ToDoのリストを表示します。
  3. ToDoに関する情報を表示できる詳細画面を作成します。
  4. ナビゲートして、詳細画面にデータを渡します。

1. Define a todo class

まず、ToDoを表す簡単な方法が必要です。この例では、タイトル(title)と説明(description)の2つのデータを含むクラスを作成します。

class Todo {
  final String title;
  final String

2021/3/14 : Flutter : Pass arguments to a named routeの訳

まとめ

(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(),
    });

2021/3/14 : Flutter : Navigate with named routesの訳

Navigate with named routes

 

前回のレシピでは、新しいルートを作成してNavigatorにプッシュすることで、新しい画面に移動する方法を学習しました

ただし、アプリの多くの部分で同じ画面に移動する必要がある場合、このアプローチではコードが重複する可能性があります。

解決策は、名前付きルートを定義し、ナビゲーションに名前付きルートを使用することです。

名前付きルートを操作するには、Navigator.pushNamed()メソッドを使用します。

この例では、元のレシピの機能を複製し、次の手順を使用して名前付きルートを使用する方法を示します。

  1. 2つの画面を作成します。
  2. ルートを定義します。
  3. Navigator.pushNamed()を使用してSecondScreenに移動します。
  4. Navigator.pop()を使用してFirstScreenに戻ります。

1. Create two screens

まず、操作する2つの画面を作成します。

最初の画面(FirstScreen)には、2番目の画面に移動するボタンが含まれています。

2番目の画面(ScondScreen)には、最初の画面に戻るためのボタンが含まれています。

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext