Flutter入門-勉強メモ002【マテリアルデザインを使用してみる】

ここではマテリアルデザインを用いたシンプルなアプリ(というか画面)を作ってみます. マテリアルデザインはGoogleが提唱しているデザインで現在Androidでは主流になっています.

目次

マテリアルデザインを使用したシンプルなアプリ

Flutterではマテリアルデザインを使いやすくするウィジェットが用意されています. それがMaterialAppScaffoldとセットで使います.

必ず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で実行すると次のようになります.

Flutter

左上に小さく”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!'),
      ),
    );
  }
}
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: (){},
              ),
            ],
          ),
        ),
      ),
    );
  }
}
Flutter

テーマを変更してみる

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

最近は目に優しいとかでダークモードは人気らいしいのですが, 真偽は不明です.

色を変える

さらに, 背景に色をつけ, 「Hello, Flutter!」を中央に寄せ, 太文字にしました. 右上のdebugバーナーも取り除きました. これはコードで書かなくても, Android Studioのほうで消すことも可能です.

「Flutter Inspector」→「Hide Debug Mode Banner」

から消すことができます.

Flutter

コードは次のようになります.

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

なかなかの配色になりました. 笑

Flutter

コメント

コメントする

目次
閉じる