Todo Design In Flutter :
Screenshot :
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
