如何在 HookWidget 中没有 Buildcontext 的情况下在 Flutter 中显示对话框

Question

如何在下面给出的示例代码中显示没有 Buildcontext 的 showDialog，其中包含扩展 HookWidget 的 class？

目前，我得到一个 Undefined name 'context'.

我正在使用以下包来管理我的应用程序的状态：

flutter_hooks: ^0.10.0
hooks_riverpod: ^0.3.0

示例代码：

class HomeScreen extends HookWidget {
  static String routeName = "/home";

  PageController _pageController = PageController(initialPage: 1);

  dynamic balanceAvailable = 0.0;
  List<TransactionModel> transactionList = [];

  _onRefresh(DragEndDetails details) async {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return Center(
            child: SizedBox(
              height: MediaQuery.of(context).size.height / 4,
              width: MediaQuery.of(context).size.width / 2,
              child: CircularProgressIndicator(
                valueColor: new AlwaysStoppedAnimation<Color>(Colors.blue),
              ),
            ),
          );
        });
    await Future.delayed(const Duration(seconds: 2));

    Navigator.pop(context);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onVerticalDragEnd: _onRefresh,
        child: PageView(
          controller: _pageController,
          children: [
            MenuScreen(),
            HomeBody(
              value: balanceAvailable,
            ),
            TransactionScreen(
              transactionList: transactionList,
              value: balanceAvailable,
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

你试过钩子的useContext()套路了吗？

Answer 2

您可以复制粘贴运行下面的完整代码
您可以将 context 传递给 _onRefresh
第 1 步：_onRefresh(DragEndDetails details, BuildContext context)
第 2 步：onVerticalDragEnd: (details) => {_onRefresh(details, context)},

工作演示

完整代码

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

class TransactionModel {}

class HomeScreen extends HookWidget {
  static String routeName = "/home";

  PageController _pageController = PageController(initialPage: 1);

  dynamic balanceAvailable = 0.0;
  List<TransactionModel> transactionList = [];

  _onRefresh(DragEndDetails details, BuildContext context) async {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return Center(
            child: SizedBox(
              height: MediaQuery.of(context).size.height / 4,
              width: MediaQuery.of(context).size.width / 2,
              child: CircularProgressIndicator(
                valueColor: new AlwaysStoppedAnimation<Color>(Colors.blue),
              ),
            ),
          );
        });
    await Future.delayed(const Duration(seconds: 2));

    Navigator.pop(context);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onVerticalDragEnd: (details) => {_onRefresh(details, context)},
        child: PageView(
          controller: _pageController,
          children: [
            MenuScreen(),
            HomeBody(),
            TransactionScreen(),
          ],
        ),
      ),
    );
  }
}

class MenuScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("MenuScreen"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'MenuScreen',
              ),
            ],
          ),
        ));
  }
}

class HomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("HomeBody"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'HomeBody',
              ),
            ],
          ),
        ));
  }
}

class TransactionScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("TransactionScreen"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'TransactionScreen',
              ),
            ],
          ),
        ));
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

如何在 HookWidget 中没有 Buildcontext 的情况下在 Flutter 中显示对话框

How to display Dialog in Flutter without a Buildcontext inside a HookWidget

showdialog

flutter

riverpod