【Flutter】インタラクティブなボタンの実装

プラグイン

Table of Contents

対象者

Flutter初心者
インタラクティブなボタンを実装したい人
シンプルな実装で、ユーザーエクスペリエンスを向上させたい人

はじめに

この記事では、FlutterでRoundedLoadingButtonを使ってインタラクティブなボタンを実装する方法を解説します。ソースコードを理解することで、ユーザーエクスペリエンスを向上させるシンプルで魅力的なUIを作成できるようになります。

インストール

flutter pub add rounded_loading_button
flutter pub get

実施するソース

class _MyHomePageState extends State<MyHomePage> {
  final RoundedLoadingButtonController _controller =
      RoundedLoadingButtonController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          child: RoundedLoadingButton(
        controller: _controller,
        onPressed: _onPressed,
        child: Text('Tap me!'),
      )),
    );
  }

  void _onPressed() async {
    await Future.delayed(Duration(seconds: 1));
    _controller.success();

    await Future.delayed(Duration(seconds: 1));
    _controller.error();

    await Future.delayed(Duration(seconds: 1));
    _controller.reset();
  }
}

RoundedLoadingButtonControllerインスタンスを作成します。
RoundedLoadingButtonウィジェットを追加します。controllerには先ほど定義したRoundedLoadingButtonControllerインスタンスを設定します。
RoundedLoadingButtonウィジェットを押したときのイベント、_onPressedメソッドを定義し、非同期処理を行います。ボタンが押されたときに、1秒ごとに_controllerのメソッドを呼び、ボタンの状態を変更したます

success: 処理が成功したときに実施
error: 処理が失敗したときに実施
rese: 元の状態に戻すときに実施
CircularProgressIndicatorのようなものは、ボタンを押したら自動で実行されます。その後、処理の成功と失敗により、successかerrorを呼んでください。

まとめ

この記事では、FlutterでRoundedLoadingButtonを使用してインタラクティブなボタンを実装する方法を学びました。今回のソースコードを活用することで、シンプルで魅力的なUIを作成し、ユーザーエクスペリエンスを向上させることができます。今後は、さらにカスタマイズして独自のデザインや機能を追加することで、アプリの魅力を高めることができます。

参考

rounded_loading_button
公式ページ

全ソース

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:rounded_loading_button/rounded_loading_button.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,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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> {
  final RoundedLoadingButtonController _controller =
      RoundedLoadingButtonController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          child: RoundedLoadingButton(
        controller: _controller,
        onPressed: _onPressed,
        child: Text('Tap me!'),
      )),
    );
  }

  void _onPressed() async {
    await Future.delayed(Duration(seconds: 1));
    _controller.success();

    await Future.delayed(Duration(seconds: 1));
    _controller.error();

    await Future.delayed(Duration(seconds: 1));
    _controller.reset();
  }
}