【Flutter超入門】基本操作、編集、使い方

Flutterの基本操作、編集、使い方について入門者向けにまとめました。

【基礎1】プロジェクトの作成・実行

① Android Studioを起動します。

Flutterでは、Hello Worldアプリとして、インストール直後に以下のような[+]ボタンをクリックすると数値が増えていくカウントアップアプリが用意されています。

実行結果

サンプルコード


Flutterでは、基本的に「lib/main.dart」を編集してアプリを作っていきます。

項目 説明
import文 「import ‘package:flutter/material.dart’;」はライブラリを読み込んでいます。materialは、Googleのマテリアルデザインでアプリを作るためのライブラリです。
main()関数 MyAppをスクリーンに表示するように書かれています。
MyAppクラス StatelessWidgetを継承しています。
StatelessWidget 見た目の変更が起きない(ステートレス)ウィジェットです。引数のcontextの中にどこでどのような作成されたかの情報があります。
StatefulWidget 見た目の変更が起きる(ステートフル)ウィジェットです。
build文 MaterialAppが返されています(import文で指定した material.dart使われており、マテリアルデザインを返すようにしている。
MaterialApp 引数にタイトル、全体の色などのテーマ情報、初期表示のホームとなるクラス(ここでは、MyHomePage)を指定しています。
MyHomePage StatefulWidgetを継承しています。コンストラクタに「key」「title」が渡されています。keyはデフォルトでユニークなものが渡されます。
super(key: key) Redirecting constructors と呼ばれる手法で、別のコンストラクタの処理を追加で行い、親クラスにもキーを渡しています。
createState() ステート(_MyHomePageState)を作成します。Statefulウィジェットなので、ステート部分の作成は必須です。
_MyHomePageStateクラス MyHomePageの型を持ったステートを継承しています(MyHomePage内のある一つの状態を管理するクラス)。
_incrementCounter()関数 さらにsetState関数があり、その中で _counter をインクリメントしており、画面の再描画を行います。ここでは、_counter(int型変数)の値が変更されたものを再描画するため、setState中に_counter を入れています。_incrementCounter() 関数はボタンを押した時に実行されたいので、FloatingActionButton関数のonPressedで呼ばれる。
_MyHomePageStateのbuild ウィジェットのビルドを行います。この中にボタンや変化するテキスト(数字)などの画面の内容を設定します。
Scaffold 「足場」という意味で、画面を作成する際のパーツ(appBar、body、floatingActionButtonなど)が入っています。
appBar アプリケーション上部のバー。title属性でバーに表示するテキストなど(widget.title)を指定します。ここでは、widget.titleはMyHomePage に渡されたtitleを持ってきています。
body 内容の中心となるものを配置ます。Centerはコンテンツを中央寄せで配置する要素です。
child bodyにchild属性があります。子要素が必要な要素は、child属性やchildren属性が必須となります。
Column リストや表のような枠組みを作る要素です。mainAxisAlignment属性を変更することで、縦もしくは横に子要素を並べるかを設定できます。Columnも子要素children(並べる子要素は複数なので、childではない)が必要で、ここでは、Textで文字を設定しています。Theme.of(context) で親のテーマ情報を持ってきています。それの「普通のテキスト」に関するテーマである textTheme の display1 タイプを取得しています。
floatingActionButton 画面左下にあるボタンで、body外に定義します。onPressed にボタンが押された時の動作として、「_incrementCounter()関数」を設定します。
参考記事 【Flutter】Hello Worldでmain.dartの基本構成をみる

【基礎2】プロジェクトの編集(ファイル分け)

Flutterでは、「lib/main.dart」を編集してアプリを作っていきますが、アプリが複雑になるほど管理が大変となるため、ページごとにdartファイルを分割するのが一般的です。

① lib/main.dartファイルを以下の内容に書き換えます。

■main.dart

② lib/ui/home_page.dartファイルを新規作成し、以下の内容を書きます。
(ホームページ用のファイルを別に作成)

実行結果

【基礎3】外部のパッケージの利用

flutterのパッケージはFlutter Packagesで検索できます。
また、パッケージ管理は「pubspec.yaml」で行います。

■pubspec.yaml

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.0
  english_words: ^3.1.0 # ここにenglish_wordsを追加

IntelliJの上の方にPackages getというのがでるのでそれを押せばpackageが導入できます。
lib/main.dartを以下のように書き換えます。

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final wordPair = new WordPair.random();
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          // child: new Text('Hello World'),
          child: new Text(wordPair.asPascalCase),
        ),
      ),
    );
  }
} 

【画面遷移】ボタン、タブでページ遷移

Flutterの画面遷移は、ウィジェットをスタックで管理できる「Navigator」を使用します。
Navigator は、します。
ホーム画面からその他画面、またその他画面への遷移し戻ることが出来るようにする場合は、次の画面への遷移にpush、画面を戻るときはpopを使用します。
(pushされた画面でpopできれば元の画面に戻ることができます)
能であれば、バックオペレーションが可能になります。※アクションバーの戻るボタ

  Navigator.of(context).pushNamed("/next"); 

スタックされた画面から、画面をクリアしてホーム画面へ戻りたい場合は、popUntil を使用します。 popUntil は条件に一致するまでスタックから画面をpopします。

  Navigator.popUntil(context, ModalRoute.withName("/home")); 

第二引数の predicate にPopを止めたい条件を指定します。
ダイアログを表示する場合は、showDialogを使用します。
showDialog の内部コードでは、push が呼ばれています。ダイアログを閉じる場合は、pop を使用します。

サンプルコード

■main.dart

■screens/home_page.dart

■screens/setting_page.dart

関連記事
1 【Flutter】ボタン・タブで画面遷移(ページ移動)

【画面スクロール】ボタンで上下移動

Flutterのボタン・ナビゲーションバーで画面スクロール(上下移動)を実装するには「animateTo」を使用します。

実行例

サンプルコード

■screens/scroll_page.dart

関連記事
1 【Flutter】ボタン・ナビゲーションバーで画面スクロール(animateTo)
2 【Flutter】AppBarの上、BottomNavigationbarの下に空白を開ける方法
関連記事
1 【Flutter入門】iOS、Android、Windowsアプリ開発
flutter
技術雑記

コメント

タイトルとURLをコピーしました