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

1,はじめに

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

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

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

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

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

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

2,じゃ、ためそう!

(1)画像を表示する

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

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

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

Sysrigarのロゴ的な何か
Sysrigar logo ?

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

(あ)実行結果

flutter動作画面
Flutter 動作画面

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

(い)コード

// 画像の表示を行う。
// 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
),

(2)ボタンを表示する

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

感謝が尽きない。

(あ)実行結果

Flutter 動作画面2
Flutter 動作画面2

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

(い)コード

// ボタン
// 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('出勤'),
)

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

3,全てのコード

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

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と、ピリオドを2回使う。
                // 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,

    );
  }
}

4,おわりに

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

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

冷静になりました。

5,参考文献

  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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA