ここではマテリアルデザインを用いたシンプルなアプリ(というか画面)を作ってみます. マテリアルデザインはGoogleが提唱しているデザインで現在Androidでは主流になっています.
マテリアルデザインを使用したシンプルなアプリ
Flutterではマテリアルデザインを使いやすくするウィジェットが用意されています. それがMaterialAppでScaffoldとセットで使います.
必ずScaffoldを使う必要はありません. 例えば, Containerなどを使うこともできます. ただ, ScaffoldがAppBarなどマテリアルデザインを提供するウィジェットになるので, セットで使用することが多くなります.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Text(‘Hello, Flutter’),
),
);
}
}このコードをiPhone 11で実行すると次のようになります.
左上に小さく”Hello, Flutter!”が見えます.
ただこれだと見えないので, 少し改良を加えて見やすくしていきます.
ちなみに, Containerを使用した場合のコードとその実行結果を示しておきます. 先ほども述べたように, Contaierではできることが限られてしまいます.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Container(
child: Text('Hello, Flutter!'),
),
);
}
}
AppBarをつける
先ほどのものにAppBarをつけてみます.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(‘My First App’),
),
body: Text(‘Hello, Flutter’),
),
);
}
}実行結果は次の通りです.
AppBarのtitleの初期設定はiPhoneでは中央, Androidでは左寄りです. これを常に中央にしたい場合は,
centerTitle: true,を入れておきます. 上の実行結果を見ればわかるように, iPhoneの場合はこれがなくても中央に寄ります.
今は画面が1つしかないのでわかりませんが, 画面遷移の際はAppBarに「←」(戻るボタン)が自動的に実装されたりとかなり便利です. こういった豊富なウィジェットがFlutterの1つの魅力だと思います.
これらを自分で実装せずにパーツを組み合わせるだけでさまざまなものを作ることができます. カメラやセンサーなどネイティブ機能でFlutterが扱うことが難しいものも, その方法が用意されているので基本的に困ることはなさそうです.
BottomAppBarをつける
BottomAppBarは下につけられるバーになります.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('My First App'),
),
body: Text('Hello, Flutter'),
bottomNavigationBar: BottomAppBar(
color: Colors.lightGreenAccent,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(
Icons.person_outline,
color: Colors.blue,
),
onPressed: (){},
),
Text('テキスト'),
RaisedButton(
child: Text('ボタン'),
onPressed: (){},
color: Colors.green,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
IconButton(
icon: Icon(
Icons.info,
color: Colors.blue,
),
onPressed: (){},
),
],
),
),
),
);
}
}
テーマを変更してみる
MaterialAppにあるthemeをdarkにしてみました. 今回はAndroidで実行しているので, titleが左寄りです.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark(),
home: Scaffold(
appBar: AppBar(
title: Text(‘My First App’),
),
body: Text(‘Hello, Flutter’),
),
);
}
}
最近は目に優しいとかでダークモードは人気らいしいのですが, 真偽は不明です.
色を変える
さらに, 背景に色をつけ, 「Hello, Flutter!」を中央に寄せ, 太文字にしました. 右上のdebugバーナーも取り除きました. これはコードで書かなくても, Android Studioのほうで消すことも可能です.
「Flutter Inspector」→「Hide Debug Mode Banner」
から消すことができます.
コードは次のようになります.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text(‘My First App’),
centerTitle: true,
backgroundColor: Colors.deepPurple,
),
body: Center(
child: Text(
‘Hello, Flutter’,
style: TextStyle(
fontSize: 40.0,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
backgroundColor: Colors.amber,
),
);
}
}なかなかの配色になりました. 笑
コメント