使用自定义小部件填充列表视图项

Question

我创建了一个简单的日历小部件。 我想为每个用户创建一个个人日历。 为此，我使用了 ListView.builder。

请在下面找到我的代码

  @override
  Widget build(BuildContext context) {
    return new SizedBox(
        height: 1000,
        child: ListView.builder(
            shrinkWrap: true,
            scrollDirection: Axis.horizontal,
            itemCount: bookingList.length,
            itemBuilder: (context, index) {
              return Column(
                children: [
                  BookingCalendar(
                      bookingService: bookingCalendarModel,
                      convertStreamResultToDateTimeRanges:
                          convertStreamResultMock,
                      getBookingStream: getBookingStreamMock,
                      uploadBooking: uploadBookingMock,
                      pauseSlots: generatePauseSlots(),
                      hideBreakTime: false,
                      loadingWidget: const Text('Fetching data...'),
                      uploadingWidget: const CircularProgressIndicator(),
                      locale: 'en_US',
                      startingDayOfWeek: CalendarDays.monday,
                      wholeDayIsBookedWidget:
                          const Text('Fully booked! Choose another day'),
                      disabledDates: [DateTime(2023, 1, 20)],
                      disabledDays: [6, 7])
                ],
              );
            }));
  }

每次当我在 ListView 中添加自定义小部件（BookingCalendar）时，我都会收到很多错误：

未找到 Material 小部件。

你能告诉我我的错误在哪里吗？

完整代码在这里：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:intl/date_symbol_data_local.dart';
import 'package:test_honours/model/doctors.dart';

import '../core/booking_calendar.dart';
import '../model/booking_service.dart';
import '../model/enums.dart';

void main() {
  initializeDateFormatting()
      .then((_) => runApp(const BookingCalendarDemoApp()));
}

class BookingCalendarDemoApp extends StatefulWidget {
  const BookingCalendarDemoApp({Key? key}) : super(key: key);

  @override
  State<BookingCalendarDemoApp> createState() => _BookingCalendarDemoAppState();
}

class _BookingCalendarDemoAppState extends State<BookingCalendarDemoApp> {
  final now = DateTime.now();
  late BookingModel bookingCalendarModel;
  List<BookingModel> bookingList = [];

  @override
  void initState() {
    super.initState();

    for (var i = 0; i < doctorsList.length; i++) {
      Doctor doctor = doctorsList[i];
      bookingList.add(bookingCalendarModel = new BookingModel(
          apptName: 'Mock Service',
          apptDuration: doctor.duration,
          bookingEnd: doctor.endHour,
          bookingStart: doctor.startHour));
    }
  }

  Stream<dynamic>? getBookingStreamMock(
      {required DateTime end, required DateTime start}) {
    return Stream.value([]);
  }

  Future<dynamic> uploadBookingMock({required BookingModel newBooking}) async {
    await Future.delayed(const Duration(seconds: 1));
    converted.add(DateTimeRange(
        start: newBooking.bookingStart, end: newBooking.bookingEnd));
    print('${newBooking.toJson()} has been uploaded');
  }

  List<DateTimeRange> converted = [];

  List<DateTimeRange> convertStreamResultMock({required dynamic streamResult}) {
    ///here you can parse the streamresult and convert to [List<DateTimeRange>]
    ///take care this is only mock, so if you add today as disabledDays it will still be visible on the first load
    ///disabledDays will properly work with real data
    DateTime first = now;
    DateTime tomorrow = now.add(Duration(days: 1));
    DateTime second = now.add(const Duration(minutes: 55));
    DateTime third = now.subtract(const Duration(minutes: 240));
    DateTime fourth = now.subtract(const Duration(minutes: 500));
    converted.add(
        DateTimeRange(start: first, end: now.add(const Duration(minutes: 30))));
    converted.add(DateTimeRange(
        start: second, end: second.add(const Duration(minutes: 23))));
    converted.add(DateTimeRange(
        start: third, end: third.add(const Duration(minutes: 15))));
    converted.add(DateTimeRange(
        start: fourth, end: fourth.add(const Duration(minutes: 50))));

    //book whole day example
    converted.add(DateTimeRange(
        start: DateTime(tomorrow.year, tomorrow.month, tomorrow.day, 5, 0),
        end: DateTime(tomorrow.year, tomorrow.month, tomorrow.day, 23, 0)));
    return converted;
  }

  List<DateTimeRange> generatePauseSlots() {
    return [
      DateTimeRange(
          start: DateTime(now.year, now.month, now.day, 12, 0),
          end: DateTime(now.year, now.month, now.day, 14, 0))
    ];
  }

  @override
  Widget build(BuildContext context) {
    return new SizedBox(
        height: 1000,
        child: ListView.builder(
            shrinkWrap: true,
            scrollDirection: Axis.horizontal,
            itemCount: bookingList.length,
            itemBuilder: (context, index) {
              return Column(
                children: [
                  BookingCalendar(
                      bookingService: bookingCalendarModel,
                      convertStreamResultToDateTimeRanges:
                          convertStreamResultMock,
                      getBookingStream: getBookingStreamMock,
                      uploadBooking: uploadBookingMock,
                      pauseSlots: generatePauseSlots(),
                      hideBreakTime: false,
                      loadingWidget: const Text('Fetching data...'),
                      uploadingWidget: const CircularProgressIndicator(),
                      locale: 'en_US',
                      startingDayOfWeek: CalendarDays.monday,
                      wholeDayIsBookedWidget:
                          const Text('Fully booked! Choose another day'),
                      disabledDates: [DateTime(2023, 1, 20)],
                      disabledDays: [6, 7])
                ],
              );
            }));
  }
}

Answer 1

您在 main 方法上缺少 MaterialApp

void main() {
  initializeDateFormatting().then(
    (_) => runApp(
      MaterialApp(
        home: const BookingCalendarDemoApp(),
      ),
    ),
  );
}

Answer 2

这是因为您无法定义根小部件：

材料应用

import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    import 'package:intl/date_symbol_data_local.dart';
    import 'package:test_honours/model/doctors.dart';
    
    import '../core/booking_calendar.dart';
    import '../model/booking_service.dart';
    import '../model/enums.dart';
    
    void main() {
      initializeDateFormatting()
          .then((_) => runApp(const MyApp()));
    }
    
    class MyApp extends StatelessWidget {
      const MyApp({super.key});
    
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home:BookingCalendarDemoApp(),
        );
      }
    }
    
    class BookingCalendarDemoApp extends StatefulWidget {
      const BookingCalendarDemoApp({Key? key}) : super(key: key);
    
      @override
      State<BookingCalendarDemoApp> createState() => _BookingCalendarDemoAppState();
    }
    
    class _BookingCalendarDemoAppState extends State<BookingCalendarDemoApp> {
      final now = DateTime.now();
      late BookingModel bookingCalendarModel;
      List<BookingModel> bookingList = [];
    
      @override
      void initState() {
        super.initState();
    
        for (var i = 0; i < doctorsList.length; i++) {
          Doctor doctor = doctorsList[i];
          bookingList.add(bookingCalendarModel = new BookingModel(
              apptName: 'Mock Service',
              apptDuration: doctor.duration,
              bookingEnd: doctor.endHour,
              bookingStart: doctor.startHour));
        }
      }
    
      Stream<dynamic>? getBookingStreamMock(
          {required DateTime end, required DateTime start}) {
        return Stream.value([]);
      }
    
      Future<dynamic> uploadBookingMock({required BookingModel newBooking}) async {
        await Future.delayed(const Duration(seconds: 1));
        converted.add(DateTimeRange(
            start: newBooking.bookingStart, end: newBooking.bookingEnd));
        print('${newBooking.toJson()} has been uploaded');
      }
    
      List<DateTimeRange> converted = [];
    
      List<DateTimeRange> convertStreamResultMock({required dynamic streamResult}) {
        ///here you can parse the streamresult and convert to [List<DateTimeRange>]
        ///take care this is only mock, so if you add today as disabledDays it will still be visible on the first load
        ///disabledDays will properly work with real data
        DateTime first = now;
        DateTime tomorrow = now.add(Duration(days: 1));
        DateTime second = now.add(const Duration(minutes: 55));
        DateTime third = now.subtract(const Duration(minutes: 240));
        DateTime fourth = now.subtract(const Duration(minutes: 500));
        converted.add(
            DateTimeRange(start: first, end: now.add(const Duration(minutes: 30))));
        converted.add(DateTimeRange(
            start: second, end: second.add(const Duration(minutes: 23))));
        converted.add(DateTimeRange(
            start: third, end: third.add(const Duration(minutes: 15))));
        converted.add(DateTimeRange(
            start: fourth, end: fourth.add(const Duration(minutes: 50))));
    
        //book whole day example
        converted.add(DateTimeRange(
            start: DateTime(tomorrow.year, tomorrow.month, tomorrow.day, 5, 0),
            end: DateTime(tomorrow.year, tomorrow.month, tomorrow.day, 23, 0)));
        return converted;
      }
    
      List<DateTimeRange> generatePauseSlots() {
        return [
          DateTimeRange(
              start: DateTime(now.year, now.month, now.day, 12, 0),
              end: DateTime(now.year, now.month, now.day, 14, 0))
        ];
      }
    
      @override
      Widget build(BuildContext context) {
        return new SizedBox(
            height: 1000,
            child: ListView.builder(
                shrinkWrap: true,
                scrollDirection: Axis.horizontal,
                itemCount: bookingList.length,
                itemBuilder: (context, index) {
                  return Column(
                    children: [
                      BookingCalendar(
                          bookingService: bookingCalendarModel,
                          convertStreamResultToDateTimeRanges:
                          convertStreamResultMock,
                          getBookingStream: getBookingStreamMock,
                          uploadBooking: uploadBookingMock,
                          pauseSlots: generatePauseSlots(),
                          hideBreakTime: false,
                          loadingWidget: const Text('Fetching data...'),
                          uploadingWidget: const CircularProgressIndicator(),
                          locale: 'en_US',
                          startingDayOfWeek: CalendarDays.monday,
                          wholeDayIsBookedWidget:
                          const Text('Fully booked! Choose another day'),
                          disabledDates: [DateTime(2023, 1, 20)],
                          disabledDays: [6, 7])
                    ],
                  );
                }));
      }
    }