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;
}
}
A canvas doesn't understand the Image type given by Flutter but instead it works with the Image class inside the dart:ui package. Start by importing this:
import 'dart:ui' as ui show Image;
It can be used as argument of drawImage inside the paint method, like this:
class MyCustomPainter extends CustomPainter {
final ui.Image myBackground;
const MyCustomPainter(this.myBackground);
@override
void paint(Canvas canvas, Size size) {
canvas.drawImage(myBackground, Offset.zero, Paint());
}
}
This will set the given image as background of your canvas. If you're wondering how to convert from Image to ui.Image, look at this simple example which uses decodeImageFromList from dart:ui.
Future<ui.Image> myBackground = await decodeImageFromList(imageFile.readAsBytes())
where imageFile is of type File.