dart 使用“拉”来刷新文本,而不是刷新图标,并导航到新屏幕,而不是任何“未来”或延迟

x33g5p2x  于 2023-04-27  发布在  其他
关注(0)|答案(1)|浏览(196)

text
我想有这样的行为,当用户拉下来他得到一个文本拉添加更多和小部件在当前屏幕上拖动下来沿着它。
要在释放时下拉显示文本和导航。

body: Column(
                children: [
                  Expanded(
                      flex: 4,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          const Text('Spent This Week',
                              style: kSmallDarkGreyTextStyle),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            textBaseline: TextBaseline.ideographic,
                            children: [
                              const Padding(
                                padding: EdgeInsets.all(3),
                                child: Text('₹', style: kBigDarkGreyTextStyle),
                              ),
                              Text(
                                weekAverage.toStringAsFixed(2),
                                style: kBlackAmountTextStyle,
                              )
                            ],
                          )
                        ],
                      )),
                  Expanded(
                    flex: 5,
                    child: Column(
                      children: const [
                        Text(''),
                      ],
                    ),
                  ),
                ],
              ),

我没有使用RefreshIndicator,因为它不允许我改变刷新图标,我想在它的地方文本。我寻找不同的方法来实现它结束了。
link
我试图使用它改变了所有列项目从展开的小部件使用具有特定高度的小部件

import 'package:expense_manager/constants.dart';
import 'package:flutter/material.dart';
import 'package:custom_refresh_indicator/custom_refresh_indicator.dart';
import 'package:responsive_sizer/responsive_sizer.dart';
import 'AddExpenditureScreen.dart';

class CurrentWeekScreen extends StatefulWidget {
  static String id = 'current_week_screen';

  @override
  State<CurrentWeekScreen> createState() => _CurrentWeekScreenState();
}

class _CurrentWeekScreenState extends State<CurrentWeekScreen> {
  late double weekAverage = 23454.99;
  IndicatorController controller = IndicatorController();
  onlyDecimal(double weekAverage) {}
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.transparent,
          elevation: 0,
          leading: const Icon(
            Icons.search,
            color: Colors.black,
            size: 28,
          ),
          actions: [
            IconButton(
              onPressed: () {},
              icon: const Icon(
                Icons.add_circle_outlined,
                color: Colors.black,
                size: 28,
              ),
            ),
          ],
        ),
        body: CustomRefreshIndicator(
          
          builder: (BuildContext context, Widget child, IndicatorController controller) { return Text('Pull to refresh'); },
          onRefresh: () async{ 
            Navigator.pushNamed(context, AddExpenditureScreen.id);
          },
          child: ListView(
            shrinkWrap: true,
            physics: const AlwaysScrollableScrollPhysics(),
            children: [
              SizedBox(
                height: 38.h,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const Text('Spent This Week', style: kSmallDarkGreyTextStyle),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      textBaseline: TextBaseline.ideographic,
                      children: [
                        const Padding(
                          padding: EdgeInsets.all(3),
                          child: Text('₹', style: kBigDarkGreyTextStyle),
                        ),
                        Text(
                          weekAverage.toStringAsFixed(2),
                          style: kBlackAmountTextStyle,
                        )
                      ],
                    )
                  ],
                ),
              ),
              SizedBox(
                height: 60.h,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: const [
                    Text(''),
                  ],
                ),
              ),
            ],
          ),
        ),
    );
  }
}

能够导航

xam8gpfp

xam8gpfp1#

使用了custom_refresh_indicator
Go through this article
需要注意的重要事项是AnimatedBuilderTransform的功能
the results
在屏幕中,您希望调用指示器并指定onAction,并提供一个ListView作为子级

body:AddMoreIndicator(
            onAction: () async {
              await Future<void>.delayed(const Duration(milliseconds: 1000));
              Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => AddExpenditureScreen(
                            loggedInUser: loggedInUser,
                          )));
            },
            child: ListView(
              shrinkWrap: true,
              physics: const AlwaysScrollableScrollPhysics(),
              children: [ .... ]
            ),
        )

创建swipe_action.dart文件=〉

import 'package:custom_refresh_indicator/custom_refresh_indicator.dart';
import 'package:flutter/material.dart';
import '../constants.dart';

const kPullToRefreshContentColor = Color(0xff877162);

class AddMoreIndicator extends StatelessWidget {
  final Widget child;
  final VoidCallback onAction;

  const AddMoreIndicator({
    Key? key,
    required this.child,
    required this.onAction,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    const height = 100.0;
    return CustomRefreshIndicator(
      onRefresh: () async => onAction(), //i need to animate to new screen
      trigger: IndicatorTrigger.leadingEdge, // i need leading edge
      child: child,
      builder: (
        BuildContext context,
        Widget child,
        IndicatorController controller,
      ) {
        return AnimatedBuilder(
            animation: controller,
            builder: (context, _) {
              final dy = controller.value.clamp(0.0, 1.25) *
                  -(height - (height * 0.25));
              return Stack(
                children: [
                  Transform.translate(
                    offset: Offset(0.0, -dy),
                    child: child,
                  ),
                  Positioned(
                    top: -height,
                    left: 0,
                    right: 0,
                    height: height,
                    child: Container(
                      color: const Color(0x783453FF),
                      transform: Matrix4.translationValues(0.0, -dy, 0.0),
                      padding: const EdgeInsets.only(bottom: 30.0),
                      constraints: const BoxConstraints.expand(),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                          if (controller.isLoading)
                            Container(
                              margin: const EdgeInsets.only(top: 8.0),
                              width: 16,
                              height: 16,
                              child: const CircularProgressIndicator(
                                color: kPullToRefreshContentColor,
                                strokeWidth: 2,
                              ),
                            )
                          else
                            const Icon(
                              Icons.arrow_downward_rounded,
                              color: kPullToRefreshContentColor,
                            ),
                          Text(
                            getText(controller),
                            style: const TextStyle(
                              color: kPullToRefreshContentColor,
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                ],
              );
            });
      },
    );
  }

  String getText(IndicatorController controller) {
    if (controller.isDragging || controller.isCanceling) {
      return "Pull to Add expense";
    } else {
      return "Adding...";
    }
  }
}

相关问题