calendar - 如何处理 Flutter 中日历轮播中单击时的按钮颜色

标签 calendar flutter widget

我正在使用日历轮播calendar carousel flutter 小部件。我试图单击日历上的随机日期并更改按钮颜色并保留此颜色,但现在我无法获得此行为。这是我的代码:

import 'package:flutter/material.dart';
import 'package:father_home_flutter/model/constants.dart';
import 'package:flutter_calendar_carousel/classes/event.dart';
import 'package:flutter_calendar_carousel/classes/event_list.dart';
import 'package:flutter_calendar_carousel/flutter_calendar_carousel.dart'
    show CalendarCarousel;

class ScreenCalendar extends StatefulWidget {
  @override
  _ScreenCalendarState createState() => new _ScreenCalendarState();
}

class _ScreenCalendarState extends State<ScreenCalendar> {
  static String noEventText = "No event here";
  String calendarText = noEventText;

  @override
  void initState() {
    _markedDateMap.add(
        new DateTime(2019, 1, 25),
        new Event(
          date: new DateTime(2019, 1, 25),
          title: 'Event 5',
          icon: _eventIcon,
        ));

    _markedDateMap.add(
        new DateTime(2019, 1, 10),
        new Event(
          date: new DateTime(2019, 1, 10),
          title: 'Event 4',
          icon: _eventIcon,
        ));

    _markedDateMap.addAll(new DateTime(2019, 1, 11), [
      new Event(
        date: new DateTime(2019, 1, 11),
        title: 'Event 1',
        icon: _eventIcon,
      ),
      new Event(
        date: new DateTime(2019, 1, 11),
        title: 'Event 2',
        icon: _eventIcon,
      ),
      new Event(
        date: new DateTime(2019, 1, 11),
        title: 'Event 3',
        icon: _eventIcon,
      ),
    ]);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(
            'Календар',
            style: Constants.myTextStyleAppBar,
          ),
          iconTheme: Constants.myIconThemeDataAppBar,
          elevation: Constants.myElevationAppBar,
          backgroundColor: Constants.myAppBarColor,
        ),
        body: SingleChildScrollView(
            child: Column(children: <Widget>[
          Card(
              child: CalendarCarousel(
            weekendTextStyle: TextStyle(
              color: Colors.red,
            ),
            weekFormat: false,
            selectedDayBorderColor: Colors.green,
            markedDatesMap: _markedDateMap,
            selectedDayButtonColor: Colors.green,
            selectedDayTextStyle: TextStyle(color: Colors.green),
            todayBorderColor: Colors.transparent,
            weekdayTextStyle: TextStyle(color: Colors.black),
            height: 420.0,
            daysHaveCircularBorder: true,
            todayButtonColor: Colors.indigo,
            locale: 'RUS',
            onDayPressed: (DateTime date, List<Event> events) {
              this.setState(() => refresh(date));
            },
          )),
          Card(
              child: Container(
                  child: Padding(
                      padding: EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 16.0),
                      child: Center(
                          child: Text(
                        calendarText,
                        style: Constants.textStyleCommonText,
                      )))))
        ])));
  }

  void refresh(DateTime date) {
    print('selected date ' +
        date.day.toString() +
        date.month.toString() +
        date.year.toString() +
        ' ' +
        date.toString());
    if(_markedDateMap.getEvents(new DateTime(date.year, date.month, date.day)).isNotEmpty){
      calendarText = _markedDateMap
          .getEvents(new DateTime(date.year, date.month, date.day))[0]
          .title;
    } else{
      calendarText = noEventText;
    }
    }
  }

  EventList<Event> _markedDateMap = new EventList<Event>(events: {
    new DateTime(2019, 1, 24): [
      new Event(
        date: new DateTime(2019, 1, 24),
        title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, '
            'sed eiusmod tempor incidunt ut labore et dolore magna aliqua.'
            ' \n\nUt enim ad minim veniam,'
            ' quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.'
            ' \n\nQuis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. '
            'Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
        icon: _eventIcon,
      )
    ]
  });

   Widget _eventIcon = new Container(
    decoration: new BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.all(Radius.circular(1000)),
        border: Border.all(color: Colors.blue, width: 2.0)),
    child: new Icon(
      Icons.person,
      color: Colors.amber,
    ),
  );

以及当前的行为:

enter image description here

使用这些参数似乎无法按照我的要求工作:

 selectedDayBorderColor: Colors.green,
 selectedDayButtonColor: Colors.green,
 selectedDayTextStyle: TextStyle(color: Colors.green),

最佳答案

如果您尝试更改启动颜色,则可能需要从当前主题覆盖它,请尝试将日历轮播小部件包装在 Theme 中并覆盖 ThemeData 如下:

 Theme(data: ThemeData(
      splashColor: Colors.green,
    )
    child: YourCarouselWidget(),
);

此外,请确保您使用 onDayPressed 属性上的 setState 更新所选日期。

关于calendar - 如何处理 Flutter 中日历轮播中单击时的按钮颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54343645/

相关文章:

java - "for"循环中的 Canvas 坐标,Java

flutter - 如何在 Dart 列表中重复重复项?

flutter json_serializable tojson 无法正常工作

android - Wifi 启用广播迟到

Android RemoteViews,如何在小部件内设置 ImageView 的 ScaleType?

iphone - 如何修复 "Cannot save event"或 "No Calendar Set"问题?

jsf - 我们可以用 <p :calendar> 应用掩码操作吗

java - 检索本周的星期一的日期

android - 我如何在 flutter 中单击交错 GridView 中的项目

reactjs - 为 react-admin 仪表板推荐一个拖放库?