Flutterメモ
code:dart
// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: Text('Hello World'),
),
),
);
}
}
このコードからいくつか調べていく。
StatelessWidget
可変状態を要求しないウィジェット。
ステートレスウィジェットはユーザーインターフェースの一部がオブジェクト自身の設定情報やウィジェットがいっぱいになるBuildContextより他のなにかに依存しないときに有効。 パフォーマンス考慮
ステートレスウィジェットのbuildメソッドは3つの状況を呼ばれる:ウィジェットの親が設定を変更し、変更に依存するInheritedWidgetである時、初めてウィジェットがツリーに入る。 もしウィジェットの親がウィジェットの設定を標準で変更するか、頻繁に変更するウィジェットを継承したなら、流動的なレンダリングパフォーマンスを維持するためにbuildメソッドのパフォーマンスを最適化するのに重要である。 再ビルドするステートレスウィジェットの事象を最小化するために使うことができるたくさんの技術がある:
buildメソッドによって作られたたくさんのノードや作るウィジェットを最小化すること。
constウィジェットを使い、ウィジェットのユーザーがすることができるウィジェットのconstコンストラクターを提供すること。
サブツリーの共通一部をキャッシュしたり、ツリー構造を変更するときGlobalKeysを使うように、StatefulWidgetを説明したいくつかの技術の使うことができるステートフルウィジェットのステートレスウィジェットをリファクタリングを考えること。 もしウィジェットがInheritedWidgetの使用するために頻繁に再ビルドをするなら、変更が葉をプッシュされているツリーの一部によって、複数ウィジェットのステートレスウィジェットのリファクタリングを考えること。 buildメソッド
このウィジェットを表すユーザーインターフェース一部を説明する。
フレームワークは、Widget.canUpdateを呼ぶことで決められたものとして、存在しているサブツリーのルートを更新することができるこのメソッドによって返したウィジェットかどうかに依存することで、存在しているサブツリーを更新したり、サブツリーを除外して、新しいサブツリーをいっぱいにするどちらでも、このメソッドによって返したウィジェットと一緒にこのウィジェットのサブツリーを入れ替える。 典型的な実装はこのウィジェットのコンストラクターと与えられたBuildContextから情報を設定されるウィジェットの新しく作られた設定を返す。 与えられたBuildContextはビルドし始めているこのウィジェットのツリーでの位置についての情報を含む。もしウィジェットがツリーの周りを動かしたり、いったん複数の場所のツリーの中に挿入されたなら、与えられたウィジェットは複数の異なるBuildContext引数をビルドする。 このメソッドの実装は以下に依存する:
MaterialAppクラス
マテリアルデザインを使うアプリケーション。
マテリアルデザインアプリケーションの要求されたたくさんのウィジェットを包む便利なウィジェット。機能的に特定するマテリアルデザインを加えることでWidgetsAppの上に構築する。 1. もしnullでないなら、/ルートによって、homeプロパティは使われる。 2. もしルートのエントリを持つなら、routeテーブルは使われる。 コンストラクタ
code:dart
MaterialApp({
Key key,
GlobalKey<NavigatorState> navigatorKey,
Widget home,
Map<String, WidgetBuilder> routes: const {},
String initialRoute,
RouteFactory onGenerateRoute,
RouteFactory onUnknownRoute,
List<NavigatorObserver> navigatorObservers: const [],
TransitionBuilder builder,
String title: '',
GenerateAppTitle onGenerateTitle,
Color color,
ThemeData theme,
ThemeData darkTheme,
ThemeMode themeMode: ThemeMode.system,
Locale locale,
Iterable<LocalizationsDelegate> localizationsDelegates,
LocaleListResolutionCallback localeListResolutionCallback,
LocaleResolutionCallback localeResolutionCallback,
bool debugShowMaterialGrid: false,
bool showPerformanceOverlay: false,
bool checkerboardRasterCacheImages: false,
bool checkerboardOffscreenLayers: false,
bool showSemanticsDebugger: false,
bool debugShowCheckedModeBanner: true
})
titleプロパティ
1行の記述はユーザーのアプリを識別するためのデバイスによって使う。
Android上でタイトルはユーザーが”最近のアプリ”ボタンを処理するときに表示されるタスクマネージャのアプリスナップショットの上に見える。iOS上でこの値は使うことができない。アプリのinfo.plistからのCFBundleDisplayNameもしくはCFBundleNameはどんな時でも与えられる代わりにするために参照される。
この値は編集されないでWidgetsApp.titleを渡す。
homeプロパティ
Scaffoldクラス
基本的なマテリアルデザインビジュアルレイアウト構造を実装する。
このクラスはドロワー、スナックバー、ボタンシートを見るためにAPIを提供する。
スナックバーもしくは持続的なボタンシートを表示するために、Scaffold.of経由で現在のBuildContextのScaffoldStateを得て、ScaffoldState.showSnackBarとScaffoldState.showBottomSheet関数を使うこと。 Scaffoldレイアウト、キーボード、ディスプレイ”ノッチ”
scaffoldは利用できる空間をいっぱいにするために拡大する。デバイスのキーボードがScaffoldの先祖を見えている時に、MediaQueryウィジェットのMediaQueryData.viewInsetsは変更し、Scaffoldは再ビルドされる。デフォルトでscaffoldのbodyはキーボードの部屋を作るためにリサイズする。リサイズを防ぐためにresizeToAvoidBottomInsetにfalseをセットすること。 iPhone X上のディスプレイ”ノッチ”のような、MediaQueryData.padding値は完全に見ることができない範囲を定義する。scaffoldのbodyはpadding値によって入れないがappBarもしくはbottomNavigationBarはpaddingを避けるためにbodyを起こす。SafeAreaウィジェットはディスプレイノッチのような範囲を避けるためにscaffoldのbody内で使うことができる。 トラブルシューティング
ネストされたScaffold
ScaffoldはMaterialAppの単一トップレベルコンテナを設計し、scaffoldをネストする必要がない。
コンストラクタ
code:dart
Scaffold({
Key key,
PreferredSizeWidget appBar,
Widget body,
Widget floatingActionButton,
FloatingActionButtonLocation floatingActionButtonLocation,
FloatingActionButtonAnimator floatingActionButtonAnimator,
List<Widget> persistentFooterButtons,
Widget drawer, Widget endDrawer,
Widget bottomNavigationBar,
Widget bottomSheet,
Color backgroundColor,
bool resizeToAvoidBottomPadding,
bool resizeToAvoidBottomInset,
bool primary: true,
DragStartBehavior drawerDragStartBehavior: DragStartBehavior.start,
bool extendBody: false, bool extendBodyBehindAppBar: false,
Color drawerScrimColor,
double drawerEdgeDragWidt
})
appBarプロパティ
scaffoldのトップで表示するためのアプリバー。
bodyプロパティ
scaffoldの主要なコンテンツ。
scaffoldのbodyでのウィジェットはアプリバーとscaffoldのbottomの間の利用できる空間の左上で配置される。代わりにウィジェットを中央揃えにするために、Centerウィジェットに入れたり、bodyを持つことを考えること。代わりにウィジェットを拡張するために、SizedBox.expandで入れることを考えること。 AppBarクラス
マテリアルデザインアプリバー。
Scaffold.appBarを使わないか、Heroを包んだ時、パディングがScaffoldによって扱われないとして、必要ならアプリバーのコンテンツ周りのパディングを直すためにMediaQueryでのアプリバーを位置づけること。 https://flutter.github.io/assets-for-api-docs/assets/material/app_bar.png
コンストラクタ
code:dart
AppBar({
Key key,
Widget leading,
bool automaticallyImplyLeading: true,
Widget title,
List<Widget> actions,
Widget flexibleSpace,
PreferredSizeWidget bottom,
double elevation,
ShapeBorder shape,
Color backgroundColor,
Brightness brightness,
IconThemeData iconTheme,
IconThemeData actionsIconTheme,
TextTheme textTheme,
bool primary: true,
bool centerTitle,
double titleSpacing: NavigationToolbar.kMiddleSpacing,
double toolbarOpacity: 1.0,
double bottomOpacity: 1.0
})
titleプロパティ
アプリバーを表示した主なウィジェット。
アプリの現在のコンテンツの記述を含んでいるTextウィジェット。 Textクラス
単一のスタイルのテキストの起動。
Textウィジェットは単一のスタイルのテキストの文字列を表示する。文字列は複数行をまたがり、レイアウト制約に依存する同じ行にすべて表示される。
Text.richコンストラクタを使うことで、Textウィジェットは異なるスタイルされたTextSpanのパラグラフを表示できる。 インタラクティビティ
コンストラクタ
code:dart
Text(String data, {
Key key,
TextStyle style,
StrutStyle strutStyle,
TextAlign textAlign,
TextDirection textDirection,
Locale locale, bool softWrap,
TextOverflow overflow,
double textScaleFactor,
int maxLines,
String semanticsLabel,
TextWidthBasis textWidthBasis
})
Centerクラス
もしその寸法が縛られていて、widthFactorとheightFactorがnullであるなら、このウィジェットは同じくらい大きくなる。もし寸法が縛られていなくて、対応するサイズ係数がnullであるとき、ウィジェットは寸法内の子のサイズと一致する。もしサイズ係数がnullでないなら、このウィジェットの対応する寸法は子の寸法とサイズ係数を生成する。 childプロパティ
ツリーのウィジェットの下のウィジェット。
ウィジェットは1つの子を持つ。複数の子をおいて、ウィジェットの子はRow、Column、Stackのようなウィジェットになる。childrenプロパティをもち、その時、ウィジェットの子を提供する。 コンストラクタ
code:dart
Center({Key key, double widthFactor, double heightFactor, Widget child})
ListViewクラス
ListViewはスクロールしているウィジェットを最も一般的に使われる。子をスクロール方向に次々に表示します。交差軸で、子はListViewをいっぱいにするために要求される。
もしnon-nullであるなら、itemExtentはスクロール方向で与えられた程度を持つ子に強いる。スクロール機構は、作業を節約するために子の範囲の事前知識を利用できるため、itemExtentを指定すると、子に自分の範囲を決定させるよりも効率的になる。 ListViewを構築する4つのオプション:
デフォルトコンストラクタは子のList<Widget>を取ってくる。リストを構築することは実際に見える子の代わりにリストビューで表示させることができるあらゆる子による作業を要求するので、このコンストラクタは子の小さい数のリストビューに適している。
ListView.separatedコンストラクタは二つのIndexedWidgetBuilderを取ってくる。ItemBuilderは要求の子アイテムをビルドし、separatorBuilderは子アイテムとの間で見える分割された子をビルドする。このコンストラクタは修正された数の子のリストビューに適している。 デフォルトで、ListViewはMediaQueryのパディングによって示した部分的な妨げを避けるためにリストのスクロールできる末端を自動的に改善する。 コンストラクタ
code:dart
ListView({
Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
double itemExtent,
bool addAutomaticKeepAlives: true,
bool addRepaintBoundaries: true,
bool addSemanticIndexes: true,
double cacheExtent,
List<Widget> children: const [],
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.start
})
code:dart
ListView.builder({
Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
double itemExtent,
@required IndexedWidgetBuilder itemBuilder,
int itemCount,
bool addAutomaticKeepAlives: true,
bool addRepaintBoundaries: true,
bool addSemanticIndexes: true,
double cacheExtent,
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.start
})
code:dart
ListView.custom({
Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
double itemExtent,
@required SliverChildDelegate childrenDelegate,
double cacheExtent,
int semanticChildCount
})
code:dart
ListView.separated({
Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
@required IndexedWidgetBuilder itemBuilder,
@required IndexedWidgetBuilder separatorBuilder,
@required int itemCount,
bool addAutomaticKeepAlives: true,
bool addRepaintBoundaries: true,
bool addSemanticIndexes: true,
double cacheExtent
})
ListTitleクラス
A list tile contains one to three lines of text optionally flanked by icons or other widgets, such as check boxes. The icons (or other widgets) for the tile are defined with the leading and trailing parameters. The first line of text is not optional and is specified with title. The value of subtitle, which is optional, will occupy the space allocated for an additional line of text, or two lines if isThreeLine is true. If dense is true then the overall height of this tile and the size of the DefaultTextStyles that wrap the title and subtitle widget are reduced.
It is the responsibility of the caller to ensure that title does not wrap, and to ensure that subtitle doesn't wrap (if isThreeLine is false) or wraps to two lines (if it is true).
The heights of the leading and trailing widgets are constrained according to the Material spec. An exception is made for one-line ListTiles for accessibility. Please see the example below to see how to adhere to both Material spec and accessibility requirements.
Note that leading and trailing widgets can expand as far as they wish horizontally, so ensure that they are properly constrained.
List tiles are typically used in ListViews, or arranged in Columns in Drawers and Cards.
Requires one of its ancestors to be a Material widget.
コンストラクタ
code:dart
ListTile({
Key key,
Widget leading,
Widget title,
Widget subtitle,
Widget trailing,
bool isThreeLine: false,
bool dense,
EdgeInsetsGeometry contentPadding,
bool enabled: true,
GestureTapCallback onTap,
GestureLongPressCallback onLongPress,
bool selected: false
})