Todo Design In Flutter

Todo Design In Flutter :

Screenshot :

Todo Design In Flutter

Constant Package :

todo_colors.dart

import 'dart:ui';

class ToDogColors {
  ToDogColors._();
  static const Color merino = Color(0xFFF1E9DC); //#F1E9DC
  static const Color coral = Color(0xFFC8B9A8); //#c8b9a8
  static const Color primaryColor = Color(0xFF0E0906); //#0e0906
  static const Color downy = Color(0xFF5AD5B0); //#5ad5b0
  static const Color valencia = Color(0xFFD54939); //#D54939
  static const Color kabul = Color(0xFF3b2b30); //#3b2b30
  static const Color anzac = Color(0xFFE19248); //#E19248
  static const Color viridian = Color(0xFF438A76); //#438A76
  static const Color orange = Color(0xFFF68054); //#f68054
  static const Color yellow = Color(0xFFFCC96F); //#FCC96F
}

Models Package :

todo_model.dart

import 'package:flutter/cupertino.dart';

class ToDoModel extends Object {
  final String id;
  final String title;
  final int duration; // in minutes
  final DateTime timeComplete;
  final DateTime createdTime;
  final int color;
  ToDoModel(
      {@required this.id,
      this.title,
      this.duration,
      this.timeComplete,
      this.color})
      : createdTime = DateTime.now();
}

Pages Package :

create_dialog.dart

import 'package:flutter/material.dart';
import 'package:flutter_todo/constant/todo_colors.dart';

class CreateDialog extends StatefulWidget {
  @override
  _CreateDialogState createState() => _CreateDialogState();
}

class _CreateDialogState extends State<CreateDialog> {
  double _slideValue = 0;
  var _color;
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Dialog(
      // backgroundColor: Color(_color ?? Colors.white.value),
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(12),
              topRight: Radius.circular(12),
              bottomRight: Radius.circular(12))),
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Row(
              children: <Widget>[
                Text('Chose color:'),
                DropdownButton(
                  onChanged: (value) {
                    _color = value;
                  },
                  value: _color,
                  items: <DropdownMenuItem>[
                    _buildDropdownMenuItem(ToDogColors.downy),
                    _buildDropdownMenuItem(ToDogColors.anzac),
                    _buildDropdownMenuItem(ToDogColors.valencia),
                  ],
                )
              ],
            ),
            Row(
              children: <Widget>[
                Text('Duration: 0 min(s)'),
                Expanded(
                  child: Slider(
                    activeColor: Theme.of(context).primaryColor,
                    min: 0,
                    max: 120,
                    onChanged: (double value) {
                      _slideValue = value;
                    },
                    value: _slideValue,
                  ),
                )
              ],
            ),
          ],
        ),
      ),
    );
  }

  DropdownMenuItem _buildDropdownMenuItem(Color color) {
    return DropdownMenuItem(
      value: color.value,
      child: Container(
        height: 16,
        width: 24,
        decoration: BoxDecoration(
            color: color,
            border: Border.all(color: Colors.white),
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(6),
                topRight: Radius.circular(6),
                bottomRight: Radius.circular(6))),
      ),
    );
  }
}

home_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_todo/constant/todo_colors.dart';
import 'package:flutter_todo/models/todo_model.dart';
import 'package:flutter_todo/widgets/todog_botnav.dart';

import 'create_dialog.dart';
import 'todo_tile.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  int _selectedIndex = 0;
  int _futureIndex;
  AnimationController controller;
  Animation<double> translate;

  double _pathDistance = 0;
  bool _block = false;
  @override
  void initState() {
    controller =
        AnimationController(vsync: this, duration: Duration(milliseconds: 180));
    translate = Tween<double>(begin: 0, end: 1).animate(
      CurvedAnimation(curve: Curves.linearToEaseOut, parent: controller),
    );
    translate
      ..addListener(() {
        setState(() {});
      })
      ..addStatusListener((status) {
        print(status);
        _block = !(status == AnimationStatus.completed ||
            status == AnimationStatus.dismissed);
        if (status == AnimationStatus.completed) {
          setState(() {
            _selectedIndex = _futureIndex;
            _futureIndex = null;
            controller.reverse();
          });
        }
      });
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: ToDogBottomNav(
          currentIndex: _selectedIndex,
          onTap: _onItemTapped,
          onActionTap: _onActionTap,
          actionButton: Hero(
            tag: 'createtodog',
            child: Container(
              padding: EdgeInsets.all(10),
              decoration: BoxDecoration(
                color: Theme.of(context).primaryColor,
                borderRadius: BorderRadius.circular(12),
              ),
              child: Icon(
                Icons.add,
                size: 16,
                color: ToDogColors.primaryColor,
              ),
            ),
          ),
          items: <Widget>[
            Icon(Icons.home, color: Colors.white),
            Icon(Icons.radio_button_unchecked, color: Colors.white),
            Icon(Icons.radio_button_checked, color: Colors.white),
            Icon(Icons.perm_identity, color: Colors.white),
          ]),
      body: Container(
        child: Column(
          children: <Widget>[
            _buildHeader(context),
            Expanded(
              child: Stack(
                fit: StackFit.expand,
                children: <Widget>[
                  _getScreen(future: true),
                  _getScreen()
                  /*Transform.translate(
                      child: _getScreen(),
                      offset: Offset(_pathDistance * translate.value, 0),
                    )*/
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Container _buildHeader(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(0, 16, 16, 0),
      width: double.infinity,
      height: 140,
      child: Row(
        children: <Widget>[
          Expanded(
            flex: 2,
            child: Padding(
              padding: const EdgeInsets.only(left: 32),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Spacer(),
                  Row(
                    children: <Widget>[
                      Icon(
                        Icons.hdr_strong,
                        color: Theme.of(context).primaryColor,
                      ),
                      SizedBox(
                        width: 8,
                      ),
                      Text(
                        _selectedIndex == 3 ? 'Flutter' : 'Flutter Tutorial',
                        style: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                            fontSize: 25),
                      ),
                    ],
                  ),
                  Padding(
                      padding: const EdgeInsets.symmetric(vertical: 8.0),
                      child: _getSubtitleHeader()),
                  SizedBox(
                    height: 12,
                  ),
                ],
              ),
            ),
          ),
          Expanded(
              flex: 1,
              child: Align(
                alignment: AlignmentDirectional.bottomEnd,
                child: Icon(Icons.airline_seat_recline_extra, size: 80, color: Colors.white),
              )),
        ],
      ),
    );
  }

  void _onItemTapped(int value) {
    setState(() {
      if (_block || (_selectedIndex == value)) return;
      _futureIndex = value;
      _pathDistance = context.size.width;
      controller.forward();
    });
  }

  _onActionTap() {
    showDialog(
        context: context,
        builder: (context) {
          return CreateDialog();
        });
  }

  _getScreen({bool future: false}) {
    if (future) {
      return Container(
        decoration: BoxDecoration(
            color: Colors.white,
            boxShadow: <BoxShadow>[
              BoxShadow(blurRadius: 14, spreadRadius: -12)
            ],
            borderRadius: BorderRadius.only(topLeft: Radius.circular(52))),
      );
    }
    switch (_selectedIndex) {
      case 0:
        return _buildToDoListScreen();
      case 1:
        return _buildToDoListScreen();
      case 2:
        return _buildToDoListScreen();
      case 3:
        return Text('');
    }
  }

  Widget _getSubtitleHeader() {
    switch (_selectedIndex) {
      case 0:
        return _buildSubtitleHeader('wwww.fluttertutorial.in');

      case 1:
        return _buildSubtitleHeader('World no. 1');

      case 2:
        return _buildSubtitleHeader('Flutter Completed');
    }
    return Container();
  }

  Widget _buildSubtitleHeader(String title) {
    return Text(
      title,
      style: TextStyle(
        color: Colors.white,
      ),
    );
  }

  _buildToDoListScreen() {
    List<ToDoModel> toDoList = new List();
    toDoList.add(ToDoModel(
        id: '1', title: 'Flutter', timeComplete: DateTime.now(), duration: 12));
    toDoList.add(ToDoModel(
        id: '1', title: 'Flutter', timeComplete: DateTime.now(), duration: 12));
    toDoList.add(ToDoModel(
        id: '1', title: 'Flutter', timeComplete: DateTime.now(), duration: 1));
    toDoList.add(ToDoModel(
        id: '1', title: 'Flutter', timeComplete: DateTime.now(), duration: 12));
    toDoList.add(ToDoModel(
        id: '1', title: 'Flutter', timeComplete: DateTime.now(), duration: 12));
    toDoList.add(ToDoModel(
        id: '1', title: 'Flutter', timeComplete: DateTime.now(), duration: 1));
    return Container(
        decoration: BoxDecoration(
            color: Colors.white,
            boxShadow: <BoxShadow>[
              BoxShadow(blurRadius: 14, spreadRadius: -12)
            ],
            borderRadius: BorderRadius.only(topLeft: Radius.circular(52))),
        child: ListView.builder(
          physics: BouncingScrollPhysics(),
          itemCount: toDoList.length,
          itemBuilder: (BuildContext context, int index) {
            final data = toDoList[index];
            return ToDoTile(
              key: ValueKey(data.id),
              data: data,
            );
          },
        ));
  }
}

todo_tile.dart

import 'package:flutter/material.dart';
import 'package:flutter_todo/models/todo_model.dart';
import 'package:flutter_todo/widgets/bottom_border_dashline.dart';
import 'package:flutter_todo/widgets/circle_check_box.dart';

class ToDoTile extends StatefulWidget {
  final ToDoModel data;
  ToDoTile({Key key, this.data}) : super(key: key);
  @override
  _ToDoTileState createState() => _ToDoTileState();
}

class _ToDoTileState extends State<ToDoTile> {
  bool _check = false;
  @override
  void initState() {
    _check = widget.data?.timeComplete != null;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(24, 16, 24, 0),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: <Widget>[
          Expanded(
            flex: 1,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: <Widget>[
                Text(
                  _getDate(widget.data?.timeComplete),
                  style: TextStyle(
                      color: Theme.of(context)
                          .scaffoldBackgroundColor
                          .withAlpha(160),
                      fontSize: 14),
                ),
                Text(
                  _getTime(widget.data?.timeComplete),
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
              ],
            ),
          ),
          SizedBox(
            width: 16,
          ),
          Expanded(
            flex: 5,
            child: CustomPaint(
              painter: BottomBorderDashLine(),
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  padding: EdgeInsets.fromLTRB(16, 16, 8, 16),
                  decoration: BoxDecoration(
                      color: Color(widget.data?.color ?? 0xFFF68054),
                      borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(12),
                          topRight: Radius.circular(12),
                          bottomRight: Radius.circular(12))),
                  child: Row(
                    children: <Widget>[
                      Expanded(
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              widget.data?.title ?? '',
                              style: TextStyle(
                                  color:
                                      Theme.of(context).scaffoldBackgroundColor,
                                  fontSize: 16),
                            ),
                            widget.data?.duration == null
                                ? Container()
                                : SizedBox(
                                    height: 8,
                                  ),
                            widget.data?.duration == null
                                ? Container()
                                : Text(
                                    '${widget.data?.duration} mins',
                                    style: TextStyle(
                                        color: Theme.of(context)
                                            .scaffoldBackgroundColor
                                            .withAlpha(160),
                                        fontSize: 14),
                                  )
                          ],
                        ),
                      ),
                      CircleCheckbox(
                        activeColor: Colors.white,
                        checkColor: Color(widget.data?.color ?? 0xFFF68054),
                        onChanged: (bool value) {
                          setState(() {
                            _check = value;
                          });
                        },
                        value: _check,
                      )
                    ],
                  ),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }

  String _getTime(DateTime time) {
    if (time == null) return '';
    return '${time.hour.toString().padLeft(2, '0')}:${time.minute.toString().padLeft(2, '0')}';
  }

  String _getDate(DateTime time) {
    if (time == null) return '';
    return '${time.month.toString().padLeft(2, '0')}/${time.day.toString().padLeft(2, '0')}';
  }
}

Widgets Package :

– bottom_border_dashline.dart

– circle_check_box.dart

todog_botnav.dart

Inside Widget Package – charts Package :

– bar_chart.dart

bubble_chart.dart

bottom_border_dashline.dart

import 'package:flutter/material.dart';

class BottomBorderDashLine extends CustomPainter {
  final Color color;
  final int gap;
  final int dashlen;
  final double width;
  BottomBorderDashLine(
      {this.gap: 2, this.dashlen: 6, Color color, this.width: 1})
      : this.color = color ?? Colors.grey[300];
  @override
  void paint(Canvas canvas, Size size) {
    List.generate((size.width ~/ (dashlen + gap)), (index) {
      return Offset(index.toDouble() * (dashlen + gap), size.height);
    }).forEach((line) {
      canvas.drawLine(
          line,
          Offset(line.dx - dashlen, line.dy),
          Paint()
            ..color = color
            ..strokeWidth = width);
    });
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

circle_check_box.dart

import 'dart:math' as math;

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';

class CircleCheckbox extends StatefulWidget {
  const CircleCheckbox({
    Key key,
    @required this.value,
    this.tristate = false,
    @required this.onChanged,
    this.activeColor,
    this.checkColor,
    this.materialTapTargetSize,
  })  : assert(tristate != null),
        assert(tristate || value != null),
        super(key: key);
  final bool value;

  final ValueChanged<bool> onChanged;
  final Color activeColor;
  final Color checkColor;
  final bool tristate;
  final MaterialTapTargetSize materialTapTargetSize;
  static const double width = 24.0;

  @override
  _CircleCheckboxState createState() => _CircleCheckboxState();
}

class _CircleCheckboxState extends State<CircleCheckbox>
    with TickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    assert(debugCheckHasMaterial(context));
    final ThemeData themeData = Theme.of(context);
    Size size;
    switch (widget.materialTapTargetSize ?? themeData.materialTapTargetSize) {
      case MaterialTapTargetSize.padded:
        size = const Size(
            2 * kRadialReactionRadius + 8.0, 2 * kRadialReactionRadius + 8.0);
        break;
      case MaterialTapTargetSize.shrinkWrap:
        size = const Size(2 * kRadialReactionRadius, 2 * kRadialReactionRadius);
        break;
    }
    final BoxConstraints additionalConstraints = BoxConstraints.tight(size);
    return _CheckboxRenderObjectWidget(
      value: widget.value,
      tristate: widget.tristate,
      activeColor: widget.activeColor ?? themeData.toggleableActiveColor,
      checkColor: widget.checkColor ?? const Color(0xFFFFFFFF),
      inactiveColor: widget.onChanged != null
          ? themeData.unselectedWidgetColor
          : themeData.disabledColor,
      onChanged: widget.onChanged,
      additionalConstraints: additionalConstraints,
      vsync: this,
    );
  }
}

class _CheckboxRenderObjectWidget extends LeafRenderObjectWidget {
  const _CheckboxRenderObjectWidget({
    Key key,
    @required this.value,
    @required this.tristate,
    @required this.activeColor,
    @required this.checkColor,
    @required this.inactiveColor,
    @required this.onChanged,
    @required this.vsync,
    @required this.additionalConstraints,
  })  : assert(tristate != null),
        assert(tristate || value != null),
        assert(activeColor != null),
        assert(inactiveColor != null),
        assert(vsync != null),
        super(key: key);

  final bool value;
  final bool tristate;
  final Color activeColor;
  final Color checkColor;
  final Color inactiveColor;
  final ValueChanged<bool> onChanged;
  final TickerProvider vsync;
  final BoxConstraints additionalConstraints;

  @override
  _RenderCheckbox createRenderObject(BuildContext context) => _RenderCheckbox(
        value: value,
        tristate: tristate,
        activeColor: activeColor,
        checkColor: checkColor,
        inactiveColor: inactiveColor,
        onChanged: onChanged,
        vsync: vsync,
        additionalConstraints: additionalConstraints,
      );

  @override
  void updateRenderObject(BuildContext context, _RenderCheckbox renderObject) {
    renderObject
      ..value = value
      ..tristate = tristate
      ..activeColor = activeColor
      ..checkColor = checkColor
      ..inactiveColor = inactiveColor
      ..onChanged = onChanged
      ..additionalConstraints = additionalConstraints
      ..vsync = vsync;
  }
}

const double _kEdgeSize = CircleCheckbox.width;
const Radius _kEdgeRadius = Radius.circular(100.0);
const double _kStrokeWidth = 3.0;

class _RenderCheckbox extends RenderToggleable {
  _RenderCheckbox({
    bool value,
    bool tristate,
    Color activeColor,
    this.checkColor,
    Color inactiveColor,
    BoxConstraints additionalConstraints,
    ValueChanged<bool> onChanged,
    @required TickerProvider vsync,
  })  : _oldValue = value,
        super(
          value: value,
          tristate: tristate,
          activeColor: activeColor,
          inactiveColor: inactiveColor,
          onChanged: onChanged,
          additionalConstraints: additionalConstraints,
          vsync: vsync,
        );

  bool _oldValue;
  Color checkColor;

  @override
  set value(bool newValue) {
    if (newValue == value) return;
    _oldValue = value;
    super.value = newValue;
  }

  @override
  void describeSemanticsConfiguration(SemanticsConfiguration config) {
    super.describeSemanticsConfiguration(config);
    config.isChecked = value == true;
  }

  RRect _outerRectAt(Offset origin, double t) {
    final double inset = 1.0 - (t - 0.5).abs() * 2.0;
    final double size = _kEdgeSize - inset * _kStrokeWidth;
    final Rect rect =
        Rect.fromLTWH(origin.dx + inset, origin.dy + inset, size, size);
    return RRect.fromRectAndRadius(rect, _kEdgeRadius);
  }

  Color _colorAt(double t) {
    return onChanged == null
        ? inactiveColor
        : (t >= 0.25
            ? activeColor
            : Color.lerp(inactiveColor, activeColor, t * 4.0));
  }

  Paint _createStrokePaint() {
    return Paint()
      ..color = checkColor
      ..style = PaintingStyle.stroke
      ..strokeCap = StrokeCap.round
      ..strokeWidth = _kStrokeWidth;
  }

  void _drawBorder(Canvas canvas, RRect outer, double t, Paint paint) {
    assert(t >= 0.0 && t <= 0.5);
    canvas.drawRRect(outer, paint);
  }

  void _drawCheck(Canvas canvas, Offset origin, double t, Paint paint) {
    assert(t >= 0.0 && t <= 1.0);
    final Path path = Path();
    const Offset start = Offset(_kEdgeSize * 0.20, _kEdgeSize * 0.45);
    const Offset mid = Offset(_kEdgeSize * 0.42, _kEdgeSize * 0.68);
    const Offset end = Offset(_kEdgeSize * 0.78, _kEdgeSize * 0.32);
    if (t < 0.5) {
      final double strokeT = t * 2.0;
      final Offset drawMid = Offset.lerp(start, mid, strokeT);
      path.moveTo(origin.dx + start.dx, origin.dy + start.dy);
      path.lineTo(origin.dx + drawMid.dx, origin.dy + drawMid.dy);
    } else {
      final double strokeT = (t - 0.5) * 2.0;
      final Offset drawEnd = Offset.lerp(mid, end, strokeT);
      path.moveTo(origin.dx + start.dx, origin.dy + start.dy);
      path.lineTo(origin.dx + mid.dx, origin.dy + mid.dy);
      path.lineTo(origin.dx + drawEnd.dx, origin.dy + drawEnd.dy);
    }
    canvas.drawPath(path, paint);
  }

  void _drawDash(Canvas canvas, Offset origin, double t, Paint paint) {
    assert(t >= 0.0 && t <= 1.0);
    // As t goes from 0.0 to 1.0, animate the horizontal line from the
    // mid point outwards.
    const Offset start = Offset(_kEdgeSize * 0.2, _kEdgeSize * 0.5);
    const Offset mid = Offset(_kEdgeSize * 0.5, _kEdgeSize * 0.5);
    const Offset end = Offset(_kEdgeSize * 0.8, _kEdgeSize * 0.5);
    final Offset drawStart = Offset.lerp(start, mid, 1.0 - t);
    final Offset drawEnd = Offset.lerp(mid, end, t);
    canvas.drawLine(origin + drawStart, origin + drawEnd, paint);
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    final Canvas canvas = context.canvas;
    paintRadialReaction(canvas, offset, size.center(Offset.zero));

    final Paint strokePaint = _createStrokePaint();
    final Offset origin =
        offset + (size / 2.0 - const Size.square(_kEdgeSize) / 2.0);
    final AnimationStatus status = position.status;
    final double tNormalized =
        status == AnimationStatus.forward || status == AnimationStatus.completed
            ? position.value
            : 1.0 - position.value;

    // Four cases: false to null, false to true, null to false, true to false
    if (_oldValue == false || value == false) {
      final double t = value == false ? 1.0 - tNormalized : tNormalized;
      final RRect outer = _outerRectAt(origin, t);
      final Paint paint = Paint()..color = _colorAt(t);

      if (t <= 0.5) {
        _drawBorder(canvas, outer, t, paint);
      } else {
        canvas.drawRRect(outer, paint);

        final double tShrink = (t - 0.5) * 2.0;
        if (_oldValue == null || value == null)
          _drawDash(canvas, origin, tShrink, strokePaint);
        else
          _drawCheck(canvas, origin, tShrink, strokePaint);
      }
    } else {
      // Two cases: null to true, true to null
      final RRect outer = _outerRectAt(origin, 1.0);
      final Paint paint = Paint()..color = _colorAt(1.0);
      canvas.drawRRect(outer, paint);

      if (tNormalized <= 0.5) {
        final double tShrink = 1.0 - tNormalized * 2.0;
        if (_oldValue == true)
          _drawCheck(canvas, origin, tShrink, strokePaint);
        else
          _drawDash(canvas, origin, tShrink, strokePaint);
      } else {
        final double tExpand = (tNormalized - 0.5) * 2.0;
        if (value == true)
          _drawCheck(canvas, origin, tExpand, strokePaint);
        else
          _drawDash(canvas, origin, tExpand, strokePaint);
      }
    }
  }
}

todog_botnav.dart

import 'package:flutter/material.dart';

class ToDogBottomNav extends StatefulWidget {
  final Widget actionButton;
  final List<Widget> items;
  final ValueChanged<int> onTap;
  final int currentIndex;
  final Function onActionTap;

  ToDogBottomNav({
    Key key,
    this.actionButton,
    this.items,
    this.currentIndex = 0,
    this.onTap,
    this.onActionTap,
  }) : super(key: key);

  @override
  _ToDogBottomNavState createState() => _ToDogBottomNavState();
}

class _ToDogBottomNavState extends State<ToDogBottomNav> {
  @override
  void initState() {
    super.initState();
  }

  List<Widget> _createButtons() {
    List<Widget> buttons = List<Widget>();
    for (int i = 0; i < widget.items.length; i++) {
      buttons.add(InkWell(
        child: AnimatedContainer(
          padding: EdgeInsets.all(8),
          decoration: BoxDecoration(
            color: i == widget.currentIndex
                ? Colors.white.withAlpha(60)
                : Colors.transparent,
            borderRadius: BorderRadius.circular(12),
          ),
          child: widget.items[i],
          duration: Duration(microseconds: 350),
        ),
        onTap: () {
          if (widget.onTap != null) widget.onTap(i);
        },
      ));
    }
    return buttons;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Padding(
        padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
        child: Container(
          padding: EdgeInsets.all(16),
          decoration: BoxDecoration(
              boxShadow: <BoxShadow>[
                BoxShadow(spreadRadius: -2, blurRadius: 4)
              ],
              color: Theme.of(context).scaffoldBackgroundColor,
              borderRadius: BorderRadius.horizontal(left: Radius.circular(0))),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              InkWell(onTap: widget.onActionTap, child: widget.actionButton),
              Expanded(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: _createButtons(),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class ToDogBottomBarItem extends StatelessWidget {
  final Widget icon;
  final Widget label;
  final Function onPressed;
  ToDogBottomBarItem({this.icon, this.label, this.onPressed});
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[icon, label],
      ),
    );
  }
}

charts Package :

bar_chart.dart

import 'package:flutter/material.dart';

class BarChart extends CustomPainter {
  final double value;
  final Color color;
  BarChart({this.value: 1, Color color}) : color = color ?? Colors.black45;
  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawLine(
        Offset(0 + size.height / 2, size.height / 2),
        Offset(size.width - size.height / 2, size.height / 2),
        Paint()
          ..color = color.withAlpha(120)
          ..strokeWidth = size.height
          ..strokeCap = StrokeCap.round);
    canvas.drawLine(
        Offset(0 + size.height / 2, size.height / 2),
        Offset(size.width * value - size.height / 2, size.height / 2),
        Paint()
          ..color = color
          ..strokeWidth = size.height
          ..strokeCap = StrokeCap.round);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

bubble_chart.dart

import 'dart:math';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class BubbleChart extends CustomPainter {
  final List<double> values;
  final Color color;
  BubbleChart({@required this.values, Color color})
      : color = color ?? Colors.black;
  @override
  void paint(Canvas canvas, Size size) {
    final radius = min(size.height, size.width / values.length) / 2;
    final gap =
        max((size.width - radius * 2 * values.length) / values.length, 2);
    final bubbles = List.generate(values.length, (index) {
      return Offset(radius * index * 2 + radius + gap * index, size.height / 2);
    });
    for (int i = 0; i < bubbles.length; i++) {
      canvas.drawCircle(bubbles[i], radius,
          Paint()..color = color.withAlpha((255 * values[i]).toInt()));
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

main.dart

import 'package:flutter/material.dart';
import 'constant/todo_colors.dart';
import 'pages/home_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'To Dog',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        fontFamily: 'PTSans',
        primarySwatch: Colors.blue,
        scaffoldBackgroundColor: ToDogColors.kabul,
        unselectedWidgetColor: Colors.white,
        primaryColor: ToDogColors.orange,
      ),
      home: HomePage(),
    );
  }
}

The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application

For more information about Flutter. visit www.fluttertutorial.in