首页 > 解决方案 > 如何在我的 bloc 和 rxdart 上添加日期选择器

问题描述

我正在使用 Flutter,我想使用 bloc 和 rxdart 模式在我的应用程序上添加一个日期选择器。我已经尝试在 youtube 和 google 上找到答案,但什么也没看到。所以任何人都可以帮助我我真的很感激你的回答或想法

import 'dart:async';
import 'package:rxdart/rxdart.dart';
import 'package:thesis_auth/src/models/feedstock_model.dart';
import 'package:thesis_auth/src/services/firestore_service.dart';
import 'package:uuid/uuid.dart';

class FeedBloc {
  final _date = BehaviorSubject<String>();
  final _numberfeedstock = BehaviorSubject<String>();
  final _feedSaved = PublishSubject<bool>();
  final _cfeed = BehaviorSubject<FeedStockModel>();
  final db = FirestoreService();
  var uuid = Uuid();

//get
  Stream<String> get date => _date.stream.transform(validateDate);
  Stream<int> get numberfeedstock =>
      _numberfeedstock.stream.transform(validateNumFeedStock);
  Stream<bool> get isValid =>
      CombineLatestStream.combine2(date, numberfeedstock, (a, b) => true);

  Stream<List<FeedStockModel>> fetchFeedStock() => db.getfeedstocks();
  Stream<bool> get feedSaved => _feedSaved.stream;
  Future<FeedStockModel> fetchfeed(String feedstockId) =>
      db.fectchfeed(feedstockId);

//set
  Function(String) get changeDate => _date.sink.add;
  Function(String) get changenumfeedstock => _numberfeedstock.sink.add;
  Function(FeedStockModel) get changeFeed => _cfeed.sink.add;

  static Object? get isnull => null;

  dispose() {
    _date.close();
    _numberfeedstock.close();
    _feedSaved.close();
    _cfeed.close();
  }

  //validator
  final validateNumFeedStock = StreamTransformer<String, int>.fromHandlers(
      handleData: (numberfeedstock, sink) {
    try {
      sink.add(int.parse(numberfeedstock));
    } catch (error) {
      sink.addError('must be a number');
    }
  });

  final validateDate =
      StreamTransformer<String, String>.fromHandlers(handleData: (date, sink) {
    if (date != isnull) {
      if (date.length >= 3 && date.length <= 30) {
        sink.add(date.trim());
      } else {
        if (date.length < 1) {
          sink.addError('Please fill up the text field');
        } else {
          sink.addError('20 character maximum');
        }
      }
    }
  });

  Future<void> editFeedStock() async {
    var feedStock = FeedStockModel(
        date: _date.value,
        numberfeedStock: int.parse(_numberfeedstock.value),
        feedstockId: uuid.v4());
    return db
        .savefeedstocks(feedStock)
        .then((value) => _feedSaved.sink.add(true))
        .catchError((error) => _feedSaved.sink.add(false));
  }

  Future<void> addFeedStock() async {
    var feedStock = FeedStockModel(
        date: _date.value,
        numberfeedStock: int.parse(_numberfeedstock.value),
        feedstockId: uuid.v4());
    return db
        .savefeedstocks(feedStock)
        .then((value) => _feedSaved.sink.add(true))
        .catchError((error) => _feedSaved.sink.add(false));
  }

  
}

这是我想将日期更改为日期选择器的表单字段

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:provider/provider.dart';
import 'package:thesis_auth/src/bloc/feed_bloc.dart';
import 'package:thesis_auth/src/styles/color.dart';
import 'package:thesis_auth/src/widgets/button.dart';
import 'package:thesis_auth/src/widgets/sliver_scaffold.dart';
import 'package:thesis_auth/src/widgets/textfield.dart';

class feedTextForm extends StatefulWidget {
  @override
  _feedTextFormState createState() => _feedTextFormState();
}

class _feedTextFormState extends State<feedTextForm> {
  Object? get isEmpty => null;

  @override
  void initState() {
    var feedBloc = Provider.of<FeedBloc>(context, listen: false);
    feedBloc.feedSaved.listen((saved) {
      if (saved != isEmpty && saved == true) {
        Fluttertoast.showToast(
            msg: "Stock Saved",
            toastLength: Toast.LENGTH_SHORT,
            gravity: ToastGravity.CENTER,
            timeInSecForIosWeb: 2,
            backgroundColor: AppColors.lightblue,
            textColor: Colors.white,
            fontSize: 16.0);

        Navigator.of(context).pop();
      }
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    var feedBloc = Provider.of<FeedBloc>(context);

    return AppSliverScaffold.materialSliverScaffold(
        navTitle: 'Add Feed Stocks             ',
        pageBody: pageBody(feedBloc, context),
        context: context);
  }

  Widget pageBody(
    FeedBloc feedBloc,
    BuildContext context,
  ) {
    return ListView(
      children: <Widget>[
        StreamBuilder<String>(
            stream: feedBloc.date,
            builder: (context, snapshot) {
              if (snapshot == isEmpty) return Container();
              return AppTextField(
                hintText: 'Date',
                materialIcon: FontAwesomeIcons.calendarAlt,
                errorText: snapshot.hasError ? snapshot.error.toString() : "",
                initialText: null,
                onChanged: feedBloc.changeDate,
              );
            }),
        StreamBuilder<int>(
            stream: feedBloc.numberfeedstock,
            builder: (context, snapshot) {
              if (snapshot == isEmpty) return Container();
              return AppTextField(
                hintText: 'Sack of Feeds',
                materialIcon: FontAwesomeIcons.layerGroup,
                errorText: snapshot.hasError ? snapshot.error.toString() : "",
                initialText: null,
                onChanged: feedBloc.changenumfeedstock,
              );
            }),
        AppButton(
            buttonText: 'Take Out Stock',
            buttonType: ButtonType.Straw,
            onPressed: () {}),
        StreamBuilder<bool>(
            stream: feedBloc.isValid,
            builder: (context, snapshot) {
              return AppButton(
                buttonText: 'Add Stock',
                buttonType: (snapshot.data == true)
                    ? ButtonType.DarkBlue
                    : ButtonType.Disabled,
                onPressed: feedBloc.addFeedStock,
              );
            })
      ],
    );
    
  }
}

标签: flutterdartdatepickerrxdart

解决方案


推荐阅读