Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@maof-devinAIdea

flutterで画像をボタンにして押したらポップアップして画面遷移するようにしたい

Last updated at Posted at 2024-06-16

この記事の目的

どうしてもflutterで掲題の内容をやってみたかったのでやった。勉強記録を以下に。目的としては後でボタンやりたくなった時にいつでもコピペできるようにするための備忘録。

ボタン押したら画面遷移する

1. 画像をボタンにする

flutter.dart
    // Bookボタン
    GestureDetector( //ボタンのタップを検知するウィジェット
    onTapDown: _onBookTapDown, // タップダウン時の処理
    onTapUp: _onBookTapUp, // タップアップ時の処理
    onTapCancel: _onBookTapCancel, // タップキャンセル時の処理
    child: Transform.scale(
      scale: _scaleBook, // Bookボタンのスケールを設定
      child: Container(
        width: 120, // サイズを調整
        height: 120, // サイズ調整
        child: ElevatedButton(
          onPressed: () {
            // ボタンのアクション
          },
          child: Image.asset(//ボタンにする画像のファイル名), // ボタンの画像
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.transparent, // ボタンの背景を透明に
            shadowColor: Colors.transparent, // 影を透明に
          ),
        ),
      ),
    ),
    ),

2. 画面遷移先のdartファイルを作る

2-1. libの中に（ファイル名）.dartでファイルを作る
2-2. その中にclassを作る

flutter.dart
// 新しい画面を表すクラス。今回はBookScreenにする。
class BookScreen extends StatelessWidget {
  
}

StatelessWidgetを打ってると自動的にパッケージ候補が出てくるのでmaterial.dartを選んでおく。StatelessWidget の後に{}をつけるとクラス名（ここではbookscreen）が赤くなるので、上にマウスを合わせて豆電球を押しCreate 1 missing override(s) を押します。そうすると、StatelessWidgetで必要な画面のWidgetを定義するための関数が自動的に生成される。

flutter.dart
// 新しい画面を表すクラス。今回はBookScreenにする。
import 'package:flutter/material.dart';

class BookScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    throw UnimplementedError();
  }


}

こっからカスタマイズ。

flutter.dart

import 'package:flutter/material.dart';

// 新しい画面を表すBookScreenクラス
class BookScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Scaffoldウィジェットを使用して画面を構築
    return Scaffold(
      // アプリバーを定義
      appBar: AppBar(
        // アプリバーのタイトルを設定
        title: Text('あなたの本'),
      ),
      // 画面のボディ部分を定義
      body: Stack(
        children: [
          // 背景画像を配置
          Positioned.fill(
            child: Image.asset(
              'images/01_back.png',
              fit: BoxFit.cover, // 背景画像を画面全体に表示
            ),
          ),
          // 本棚の要素をここに追加する
          // 例:
          // Center(
          //   child: Text('本棚の要素をここに追加'),
          // ),
        ],
      ),
    );
  }
}

3.main.dartに戻って画面が遷移するようにする

onPressedの中身をコピペ。

flutter.dart
onPressed: () { //これはボタン押した時に何が起こるかって話
  Navigator.push( //このNavigatorっていうのが画面遷移するよって話
    context,
    MaterialPageRoute(builder: (context) => BookScreen()),//今回はBookScreen
  );
}

一番最初の部分に画面遷移先のパッケージをインポートする。

import 'package:flutter/material.dart';
import 'package:flutter_application_1/book_screen.dart';

4. ボタン押したら前の画面に戻るようにしたい時

onPressed: () {
    Navigator.pop(context);
    }

ボタンがポップアップするようにする

flutter.dart

// MyHomePageの状態を管理するクラス このクラスに入れることが大事
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
 double _scaleBook = 1.0; // Bookボタンのスケールを管理する変数。元の大きさをこれにするよっていう定義

// Bookボタンのタップダウン時の処理
void _onBookTapDown(TapDownDetails details) {
  setState(() {
    _scaleBook = 1.05; // タップ時にBookボタンを拡大　この数字いじるとポップアップした時の大きさが変わる
  });
}

// Bookボタンのタップアップ時の処理
void _onBookTapUp(TapUpDetails details) {
  setState(() {
    _scaleBook = 1.0; // タップ解除時にBookボタンを元のサイズに戻す
  });
}

// Bookボタンのタップキャンセル時の処理
void _onBookTapCancel() {
  setState(() {
    _scaleBook = 1.0; // タップキャンセル時にBookボタンを元のサイズに戻す
  });
}

これはアニメーションとは違って、ただポップアップを実装するためのウィジェット
アニメーションでやるならより複雑な動きができる。

アニメーションでゆっくりやるならこうらしい。

ポップアップのスピードを調整するには、アニメーションを使用する方法があります。以下のように修正することで、ゆっくりとしたポップアップ効果を実現できます。

flutter.dart
double _scaleBook = 1.0; // Bookボタンのスケールを管理する変数
AnimationController _bookController; // Bookボタンのアニメーションコントローラー
Animation<double> _bookScaleAnimation; // Bookボタンのスケールアニメーション

@override
void initState() {
  super.initState();
  // アニメーションコントローラーの初期化
  _bookController = AnimationController(
    duration: const Duration(milliseconds: 500), // アニメーションの時間を調整
    vsync: this,
  );
  // スケールアニメーションの設定
  _bookScaleAnimation = Tween<double>(begin: 1.0, end: 1.05).animate(
    CurvedAnimation(
      parent: _bookController,
      curve: Curves.easeOut, // イージング曲線を調整
    ),
  );
}

@override
void dispose() {
  _bookController.dispose(); // アニメーションコントローラーの破棄
  super.dispose();
}

// Bookボタンのタップダウン時の処理
void _onBookTapDown(TapDownDetails details) {
  _bookController.forward(); // アニメーションの開始
}

// Bookボタンのタップアップ時の処理
void _onBookTapUp(TapUpDetails details) {
  _bookController.reverse(); // アニメーションの逆再生
}

// Bookボタンのタップキャンセル時の処理
void _onBookTapCancel() {
  _bookController.reverse(); // アニメーションの逆再生
}

変更点:

  1. AnimationControllerとAnimation<double>を追加しました。
  2. initStateメソッドで、アニメーションコントローラーとスケールアニメーションを初期化しています。
    • durationをDuration(milliseconds: 500)に設定し、アニメーションの時間を長くしています。
    • curveをCurves.easeOutに設定し、イージング曲線を調整しています。
  3. disposeメソッドで、アニメーションコントローラーを破棄しています。
  4. タップイベントの処理を変更しました。
    • タップダウン時に_bookController.forward()を呼び出し、アニメーションを開始します。
    • タップアップ時とタップキャンセル時に_bookController.reverse()を呼び出し、アニメーションを逆再生します。

これにより、Bookボタンのポップアップがゆっくりと拡大・縮小するようになります。アニメーションの時間やイージング曲線を調整することで、好みのスピードや動きに設定できます。

また、GestureDetector内のTransform.scaleを以下のように変更します。

Transform.scale(
  scale: _bookScaleAnimation.value, // アニメーションの値を使用
  child: Container(
    // ...
  ),
),

これで、Bookボタンのポップアップがアニメーションを使用して、ゆっくりと拡大・縮小するようになります。ポップアップのスピードを調整するには、アニメーションを使用する方法があります。以下のように修正することで、ゆっくりとしたポップアップ効果を実現できます。

今後もアップデートして更新していく

あとはタップした時の音や、データを引き継いで画面遷移する方法を試してここに書きたい。

感想

やりたいことchartgptに投げて、ぜんぶこ

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?