はじめに
Flutterの基本的なことをまとめていきます。
Flutterとは
Flutterとは、Googleが提供しているUIツールキットです。
iOSとAndroidの両方のプラットフォームを、１つのコードで作成出来るので
非常に生産性が高いです。
他の特徴として、以下のものが挙げられます。
・Dart言語を使用している。
・アプリを一瞬でリロードできる。(ホットリロード)
・公式ライブラリのUIコンポーネントが豊富で、柔軟なデザインに対応できる。
環境構築について
公式サイトが分かりやすいです。
$ flutter doctor
上記コマンドがいろいろ教えてくれるので
言われたとおりやれば、環境構築することが出来ます。
ウィジェットについて
FlutterのUIはすべてウィジェットで構成されています。
・アプリに表示される部品(ラベル、スクロールバーやボタン)
・レイアウトに関するもの(パディング、マージン)
以上のような、画面のデザインに関わるもの全てがウィジェットです。
このウィジェットを組み合わせ、ツリー状に継承して画面を構成します。
(これをウィジェットツリーと呼びます。)
ウィジェットの種類は大きく分けて、２つあります。
Stateless Widget
状態を持たないウィジェット。
一度インスタンスしたら、変わることがないです。
build() メソッドを実装する必要があります。
Stateful Widget
状態を持つウィジェット。
build() メソッドが必要ないです。
createState() メソッドを実装して
状態を変更することが可能です。
基本的に、どちらかを継承してウィジェットを作成していくことになります。
Hello World
Hello worldを出力してみましょう。
以下のコードでHello Worldが出力できます。
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
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'),
),
),
);
}
}
結果
ロジック説明
最初に main() が呼ばれ、 runApp() にウィジェットを渡すことで画面を構築していきます。
MyApp() が StatelessWidget を継承しており、全体をbuildしています。
MaterialAppは、マテリアルデザインで実装しやすくした便利なウィジェットで
マテリアルデザインにするには、Scaffoldとともに必ず使用します。
Scaffoldは、マテリアルデザイン用のWidgetで
AppBar、title、およびホーム画面のウィジェットツリーを保持するbodyプロパティを渡しています。
ちょっとカスタマイズ
一部分を変えて、テキストからボタンに変更してみます。
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Welcome to Flutter',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Welcome to Flutter'),
),
body: new Center(
/// 以下を変更
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text("Button"),
color: Colors.orange,
textColor: Colors.white,
onPressed: () {},
),
],
),
),
),
);
}
}
結果
このようにウィジェットを配置することで、簡単にUIを作成することが可能です。
DartPadについて
Dartのコードを試せる、DartPadというサイトがあるのですが
Flutterのコードも簡単にテストすることが出来ます。
(上記コードも実行出来ます)
さいごに
Flutterは便利なライブラリやウィジェットが多数あるので
それらを使いこなせるよう、もっと理解を深めていきたいです。