Sysrigar

Flutter,画像の表示とボタンの表示

2019年3月16日 カテゴリー：Web系, モバイルアプリ開発, 技術系 コメント : 0

１，はじめに

前回の記事に引き続き、Flutterでのプログラミング記事である。

ダイアログの表示とテキストの表示が確認できたので、画像の表示を確認する。

また、サンプルアプリに実装されていたボタン以外のボタンウィジェットの動作確認も行う。

この記事を書くにあたり、Flutterをとてつもなくわかりやすく解説してくださった先人様のサイトを参考にした。

わかりやすいFlutterリファレンス | Flutterをトピック毎に解説した日本語のわかりやすいリファレンスです。

初めてFlutterに触れる人が気になるところをほとんど解説してくださっている。感謝。

Flutterをめちゃくちゃわかりやすく解説してくださっているサイトを発見した！！ /
わかりやすいFlutterリファレンス | Flutterをトピック毎に解説した日本語のわかりやすいリファレンスです。
https://t.co/pNJXsnbucN

— jskny (@jskny_tw) March 16, 2019

２，じゃ、ためそう！

（１）画像を表示する

上記のサイトの記載等に基づき、画像の表示を試みる。

オンライン上の画像の表示と、ローカルの画像を表示する方法があるようだ。

まあ、オンラインの方で動作確認をしよう。

当サイトのロゴ的な画像があるので、それをアプリ側で表示してみる。

（あ）実行結果

アプリに画像が表示されることが確認できた。

（い）コード

// 画像の表示を行う。
// https://nzigen.com/flutter-reference/2018-04-16-image.html
// 上記サイト参照
// 単なる画像表示は先人様がめっちゃわかりやすく解説してくださっているので、
// 縦横幅の指定でもすることにする。
Image.network(
  'https://sysrigar.com/wp-content/uploads/2017/09/s-log.png',
  width: 120,
  height: 120
),

（２）ボタンを表示する

これも、先人様のわかりやすい解説記事を参考にしながら動作確認を行った。

感謝が尽きない。

（あ）実行結果

ボタンクリック後の画面であるが、「にゃーん」のダイアログが正常に動作していることが確認できる。

（い）コード

// ボタン
// https://nzigen.com/flutter-reference/2018-04-18-flat-button.html
FlatButton(
  padding: EdgeInsets.all(10.0),
  color: Colors.redAccent,
  onPressed: () {
    showDialog(
      context: context,
      builder: (_) => AlertDialog(
        title :Text("にゃーん"),
        content: Text("あなたは出勤してしまった。。。"),
      )
    );
  },

  child: Text('出勤'),
)

ボタンを押下後、ダイアログを表示する仕掛けにした。

３，全てのコード

本プログラムの全てのコードは下記の通りである。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello World App',
      theme: ThemeData(
        primarySwatch: Colors.orange,
      ),
      home: MyHomePage(title: 'Hello World'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),

      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Hello World !',
            ),

            // 画像の表示を行う。
            // https://nzigen.com/flutter-reference/2018-04-16-image.html
            // 上記サイト参照
            // 単なる画像表示は先人様がめっちゃわかりやすく解説してくださっているので、
            // 縦横幅の指定でもすることにする。
            Image.network(
              'https://sysrigar.com/wp-content/uploads/2017/09/s-log.png',
              width: 120,
              height: 120
            ),

            Text(
              '働かずに生活がしたいな・・・',
              style:TextStyle(
                // 文字の背景色を指定する際は、Paint()..colorと、ピリオドを２回使う。
                // https://stackoverflow.com/questions/53807975/how-to-set-a-text-background-with-flutter
                background : Paint()..color = Colors.deepOrangeAccent,
                fontSize: 24,
              ),
              textAlign: TextAlign.center,
            ),

            // ボタン
            // https://nzigen.com/flutter-reference/2018-04-18-flat-button.html
            FlatButton(
              padding: EdgeInsets.all(10.0),
              color: Colors.redAccent,
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (_) => AlertDialog(
                    title :Text("にゃーん"),
                    content: Text("あなたは出勤してしまった。。。"),
                  )
                );
              },

              child: Text('出勤'),
            )

          ],
        ),
      ),

      bottomNavigationBar: BottomAppBar(
        // 画面の下に70pxの余白を作り、
        // アラートボタンが画面の下にくっつく見栄えの悪い現象を回避する。
        child: Container(height: 70.0,),
      ),

      // 画面の下にボタンをセット
      floatingActionButton: FloatingActionButton(
        // ボタン押されたらダイアログ出そうか。
        onPressed: () {
          showDialog(
            context: context,
            builder: (_) => AlertDialog(
              title :Text("Hello !"),
              content: Text("Welcome to Flutter World !"),
            )
          );
        },

        // アイコン
        child: Icon(Icons.alarm_add),
      ),
      // とりま、中央寄せで配置する。
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

    );
  }
}

４，おわりに

画面項目をガリガリとやっていくあたり、WindowsのアプリをC#で作る際に、Visual Studioが自動生成するコードみたいだなと思った。

ハイブリッドアプリだと、Monacaで使用してみたフレームワークがあるが、それと比べてもFlutterって独特だなと感じた。

爆笑して、ふと冷静になり無になっている。
俺は何を作っているんだ？#flutter pic.twitter.com/xlhLRcgK9b

— jskny (@jskny_tw) March 16, 2019

５，参考文献

1. わかりやすいFlutterリファレンス | Flutterをトピック毎に解説した日本語のわかりやすいリファレンスです。
2. 画像を表示する | わかりやすいFlutterリファレンス
3. フラットなボタンを表示する | わかりやすいFlutterリファレンス
4. How to set a text background with Flutter? – Stack Overflow
5. Text class – widgets library – Dart API

Tag : dart, Flutter 作成者 : jskny