CODEWITHSUNDEEP
calendarflutter
TheLetch
TheLetch

Reputation: 405

Can someone help me with a framework or something else to implement this type of calendar widget in flutter

from the design

I would like to show a calendar not as a dialog. And I'll like the use to be able to select date interval as in the screenshot.

Upvotes: 1

Views: 971

Answers (2)

olexa.le
olexa.le

Reputation: 1807

I would recommend you not to reinvent the wheel and pick one of the community calendar widgets (like that one), but in case you need a custom solution, you may start with something really simple. For example, if you need to pick a range you may just take a grid and a few buttons like that:

import 'package:flutter/material.dart';

class CalendarPage extends StatefulWidget {
  final String title;

  CalendarPage({Key key, this.title}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _CalendarPageState();
}

class _CalendarPageState extends State<CalendarPage> {
  int _left = -1;
  int _right = -1;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: GridView.count(
        crossAxisCount: 7,
        children: List.generate(31, (index) {
          return Container(
              decoration: BoxDecoration(
                border: Border.all(width: 2.0, color: Colors.black38),
                color: _isInBounds(index)
                    ? Colors.yellow[100]
                    : Colors.transparent,
                borderRadius: const BorderRadius.all(const Radius.circular(8.0)),
              ),
              margin: const EdgeInsets.all(2.0),
              child: FlatButton(
                onPressed: () => _handleTap(index),
                child: Text('${index + 1}',
                    style: Theme.of(context).textTheme.body2,
                    textAlign: TextAlign.center)));
        }),
       ));
  }

  void _handleTap(index) {
    setState(() {
      if (_left == -1)
        _left = index;
      else if (_right == -1) _right = index;
    });
  }

  bool _isInBounds(int index) => _left <= index && index <= _right;
}

Upvotes: 1

scottstoll2017
scottstoll2017

Reputation: 1124

UI: https://flutter.io/tutorials/layout/

Selecting a range: https://www.didierboelens.com/2018/07/range-slider/

You'll learn a lot from these. Good luck!

Upvotes: 0

Related Questions