| |

Flutterの練習3

前回作ったアプリのボタンをアイコンに変えます。ついでに、iOS風のデザインと言われているCupertinoのアイコンも使ってみます。
できたのはこちらです。
CupertinoのインポートはMaterial.dartに続いて記述します。


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

ボタンのRowは以下の通りです。


            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Column(
                  children: [
                    IconButton(
                      icon: const Icon(
                        Icons.add,
                      ),
                      tooltip: 'Increase One',
                      onPressed: _incrementCounter,
                    ),
                    const Text('Plus One'),
                  ],
                ),
                const SizedBox(width: 40),
                Column(
                  children: [
                    CupertinoButton.filled(
                      onPressed: _decrementCounter,
                      child: const Text('minus'),
                    ),
                    const Text('Minus One'),
                  ],
                ),
                const SizedBox(width: 40),
                Column(
                  children: [
                    CupertinoButton(
                      onPressed: _resetCounter,
                      child: const Icon(CupertinoIcons.refresh),
                    ),
                    const Text('Reset the Number'),
                  ],
                ),
              ],
            ),

main.dartはこちらです。

類似投稿

コメントを残す

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.