flutter - 如何在 Flutter 中显示对话框而不在 HookWidget 中使用 Buildcontext

Question

如何在下面给出的示例代码中显示showDialog没有 aBuildcontext的示例代码，该示例代码在扩展 a 的类中HookWidget？

目前，我得到一个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

您可以在下面复制粘贴运行完整代码
您可以传递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(),
    );
  }
}

Answer 2

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