Calendar weekview in flutter

Question

I am trying to program a weekview like in the google calendar for flutter. I want to display a timetable where the events begin and end at individual times (e.g. 9:34, 17:11) and at exactly the times they should be displayed in the calendar. So not rounded up or down to the full hour as I currently implemented it with a table widget.

What would be the best way to achieve such an view. I don't know where to start. The horizontal scrolling itself isn't so important. But the vertical one is my problem. How do I place these event widgets at a specific position in a scrollable list?

I appreciate every kind of answer. It would help me very much.

Solution

Here is a poor mans version, using a CustomScrollView and simple Stacks with Positioned children.

Things are getting more difficult if you also want horizontal scrolling. For really complex layouts with animations, you may need a custom layout.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Playground',
      home: TestPage(),
    );
  }
}

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Calendar'),
      ),
      body: WeekView(),
    );
  }
}

const headerHeight = 50.0;
const hourHeight = 100.0;

class WeekView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverPersistentHeader(
          delegate: WeekViewHeaderDelegate(),
          pinned: true,
        ),
        SliverToBoxAdapter(
          child: _buildGrid(),
        )
      ],
    );
  }

  Widget _buildGrid() {
    return SizedBox(
      height: hourHeight * 24,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: List.generate(7, (d) => _buildColumn(d)),
      ),
    );
  }

  Widget _buildColumn(int d) {
    return Expanded(
      child: Stack(
        children: <Widget>[
          Positioned(
            left: 0.0,
            top: d * 25.0,
            right: 0.0,
            height: 50.0 * (d + 1),
            child: Container(
              margin: EdgeInsets.symmetric(horizontal: 2.0),
              color: Colors.orange[100 + d * 100],
            ),
          )
        ],
      ),
    );
  }
}

class WeekViewHeaderDelegate extends SliverPersistentHeaderDelegate {
  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: Colors.red.withOpacity(0.5),
      child: Center(
        child: Text('HEADER'),
      ),
    );
  }

  @override
  double get maxExtent => headerHeight;

  @override
  double get minExtent => headerHeight;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    return false;
  }
}

Comments

[Hhorn]

Thank you very much. This was very helpful to start with.

[tomer.z]

Is there a ready component for this + horizontal scrolling? Basically I want to have something thats the same as the google calendar weekview for flutter

[F-1]

I'm looking to do something similar but for a timetable. How would you implement zooming? @Hhorn were you able to get this working?

[Manish Patel]

need help with following stackoverflow.com/questions/59752626/…

[Ziyad Mansy]

hi, how can i make you package not scrollable and shows every screen by week?