スワイプで画面を戻る機能を無効化させる方法(WillPopScope)

ポイント

①WillPopScopeでScaffoldをラップする
②戻る機能が有効の時はnullを指定、
   戻る機能を無効化させたいときはfalseを返す
   

コード

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

final _canPopProvider = StateProvider.autoDispose((ref) => false);

class SecondScreen extends HookConsumerWidget {
  const SecondScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final canPop = ref.watch(_canPopProvider);

    return WillPopScope(
      onWillPop: canPop ? null : () async => false, //👈ここ
      child: const Scaffold(
        appBar: MyAppBar(title: 'Second'),
        body: _Body(),
      ),
    );
  }
}

class _Body extends HookConsumerWidget {
  const _Body();

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final canPop = ref.watch(_canPopProvider);

    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text(
            'canPop',
            style: TextStyle(
              fontSize: 30,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 30),
          MyButton(
            text: canPop.toString(),
            backgroundColor: canPop ? Colors.red : Colors.blue,
            onPressed: () => ref.read(_canPopProvider.notifier).state = !canPop,
          ),
        ],
      ),
    );
  }
}

参考


この記事が気に入ったらサポートをしてみませんか?