【Flutter】画像&アイコンを表示させてみた！

はじめに。

本日もやってまいりました。
最近お気に入りのFlutterタイム。
Flutterでは簡単にアイコンを表示させることができるという噂を聞いたので早速試そうと思います。
それではやっていきましょう！

▼参考サイト

ソースコードと実行画面

以下が実行画面になります。

ソースコードは以下になります。

main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:sample/next_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => MyHomePage(title: 'Flutter大学'),
        '/next': (context) => NextPage('test'),
      },
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  String text = 'next';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(

        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset('images/tet.png'),
            RaisedButton(
              child: Icon(
                Icons.arrow_forward_ios,
              ),
              color: Colors.blue,
              onPressed: () async{
                // ここに処理を記述
                final result = await Navigator.pushNamed(context, '/next');
                text = result.toString();
                print(result.toString());
              },
            ),
          ],
        ),
      ),
    );
  }
}

next_page.dart

import 'package:flutter/material.dart';

class NextPage extends StatelessWidget {
  NextPage(this.name);
  final String name;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('NextPage'),
      ),
      body: Container(
        height:double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(name),
            Center(
              child: RaisedButton(
                child: Icon(
                  Icons.arrow_back_ios,
                ),
                onPressed: () {
                  Navigator.pop(context, 'ill be back!');
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

pubspec.yaml

name: sample
description: A new Flutter project.

version: 1.0.0+1
environment:
  sdk: ">=2.15.1 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^1.0.0

flutter:
  uses-material-design: true
  assets:
    - images/tet.png

さいごに。

webアプリケーションでアイコンを表示させる場合は画像を用意したりwebアイコンを使うための準備をしなくてはいけませんが、Flutterなら手間なくいろんなアイコンが使えて感動しました！
次回はテキスト修飾をやっていきます！
みなさんもこれを機に一緒にやっていきましょう！