I have an app for painting using custom paint, and I wanted to add an image in the background so it can be painted over it but unfortunately I can't seem to figure out how to do that,I tried using a stack but every time I do the custom paint will only paint on the container but never on the image for some reason
I would really appreciate any help on this matter
Here's the code :
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter_colorpicker/flutter_colorpicker.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class DrawingArea {
Offset point;
Paint areaPaint;
DrawingArea({this.point, this.areaPaint});
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<DrawingArea> points = [];
Color selectedColor;
double strokeWidth;
@override
void initState() {
super.initState();
selectedColor = Colors.black;
strokeWidth = 2.0;
}
@override
Widget build(BuildContext context) {
final double width = MediaQuery.of(context).size.width;
final double height = MediaQuery.of(context).size.height;
void selectColor() {
showDialog(
context: context,
child: AlertDialog(
title: const Text('Color Chooser'),
content: SingleChildScrollView(
child: BlockPicker(
pickerColor: selectedColor,
onColorChanged: (color) {
this.setState(() {
selectedColor = color;
});
},
),
),
actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text("Close"))
],
),
);
}
return Scaffold(
body: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color.fromRGBO(138, 35, 135, 1.0),
Color.fromRGBO(233, 64, 87, 1.0),
Color.fromRGBO(242, 113, 33, 1.0),
])),
),
Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: width * 0.80,
height: height * 0.80,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20.0)),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.4),
blurRadius: 5.0,
spreadRadius: 1.0,
)
]),
child: GestureDetector(
onPanDown: (details) {
this.setState(() {
points.add(DrawingArea(
point: details.localPosition,
areaPaint: Paint()
..strokeCap = StrokeCap.round
..isAntiAlias = true
..color = selectedColor
..strokeWidth = strokeWidth));
});
},
onPanUpdate: (details) {
this.setState(() {
points.add(DrawingArea(
point: details.localPosition,
areaPaint: Paint()
..strokeCap = StrokeCap.round
..isAntiAlias = true
..color = selectedColor
..strokeWidth = strokeWidth));
});
},
onPanEnd: (details) {
this.setState(() {
points.add(null);
});
},
child: SizedBox.expand(
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(20.0)),
child: CustomPaint(
painter: MyCustomPainter(points: points),
),
),
),
),
),
),
Container(
width: width * 0.80,
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(20.0))),
child: Row(
children: <Widget>[
IconButton(
icon: Icon(
Icons.color_lens,
color: selectedColor,
),
onPressed: () {
selectColor();
}),
Expanded(
child: Slider(
min: 1.0,
max: 5.0,
label: "Stroke $strokeWidth",
activeColor: selectedColor,
value: strokeWidth,
onChanged: (double value) {
this.setState(() {
strokeWidth = value;
});
},
),
),
IconButton(
icon: Icon(
Icons.layers_clear,
color: Colors.black,
),
onPressed: () {
this.setState((){
points.clear();
});
}),
],
),
)
],
),
),
],
),
);
}
}
class MyCustomPainter extends CustomPainter {
List<DrawingArea> points;
MyCustomPainter({@required this.points});
@override
void paint(Canvas canvas, Size size) {
Paint background = Paint()..color = Colors.white;
Rect rect = Rect.fromLTWH(0, 0, size.width, size.height);
canvas.drawRect(rect, background);
canvas.clipRect(rect);
for (int x = 0; x < points.length - 1; x++) {
if (points[x] != null && points[x + 1] != null) {
canvas.drawLine(points[x].point, points[x + 1].point, points[x].areaPaint);
} else if (points[x] != null && points[x + 1] == null) {
canvas.drawPoints(PointMode.points, [points[x].point], points[x].areaPaint);
}
}
}
@override
bool shouldRepaint(MyCustomPainter oldDelegate) {
return oldDelegate.points != points;
}
}
