flutter: CustomPaint widget turned blank when put in a Column - flutter

I've got something super bizarre:
The following code paints a rectangle with CustomPaint. This version works fine
import 'package:flutter/material.dart';
class MyApp extends StatefulWidget {
#override
_ MyAppState createState() => _ MyAppState();
}
class _MyAppState extends State<MyApp> {
EmbeddedPainter _painter;
#override
void initState() {
super.initState();
_painter = EmbeddedPainter();
}
#override
Widget build(BuildContext context) {
return Container(
child: ClipRect(
child: CustomPaint(
painter: _painter
),
),
);
}
}
Then as soon as I place this CustomPaint into a Column widget, I no longer see the painted rectangle.
import 'package:flutter/material.dart';
class MyApp extends StatefulWidget {
#override
_ MyAppState createState() => _ MyAppState();
}
class _MyAppState extends State<MyApp> {
EmbeddedPainter _painter;
#override
void initState() {
super.initState();
_painter = EmbeddedPainter();
}
#override
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
ClipRect(
child: CustomPaint(
painter: _painter
),
),
],
)
);
}
}
The painter looks like this
class EmbeddedPainter extends CustomPainter with ChangeNotifier {
var _paint = Paint()
..strokeJoin = StrokeJoin.miter
..strokeWidth = 1.0
..color = Colors.green
..style = PaintingStyle.fill;
#override
void paint(Canvas canvas, Size size) {
canvas.drawRect(Rect.fromLTWH(50, 50, 100, 100), _paint);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) => true;
void update(Color color0, Color color1) {
// draw
notifyListeners();
}
}

Solved it myself:
The ClipRect must be wrapped with a container with size, e.g., a SizedBox.
#override
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
SizedBox(
width: 500,
height: 300,
child: ClipRect(
child: CustomPaint(
painter: _painter
),
),
)
],
)
);
}

Related

Why red lines painted?

I expected size to be a child widget's size, and the result to be a whole black screen.
But it seems not. My _TestBox doesn't cover all child area. Why this happens?
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(home: HomePage());
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: SingleChildScrollView(
child: Column(
children: [
SizedBox(height: 300),
_TestBox(
child: Container(width: 200, height: 200, color: Colors.red),
),
SizedBox(height: 800),
],
),
));
}
}
#immutable
class _TestBox extends SingleChildRenderObjectWidget {
const _TestBox({Widget? child}) : super(child: child);
#override
_TestFilter createRenderObject(BuildContext context) {
return _TestFilter();
}
#override
void updateRenderObject(BuildContext context, _TestFilter filter) {
filter.markNeedsPaint();
}
}
class _TestFilter extends RenderProxyBox {
#override
ShaderMaskLayer? get layer => super.layer as ShaderMaskLayer?;
#override
bool get alwaysNeedsCompositing => child != null;
#override
void paint(PaintingContext context, Offset offset) {
if (child != null) {
assert(needsCompositing);
const color = Colors.black;
layer ??= ShaderMaskLayer();
layer!
..shader = LinearGradient(
colors: [color, color],
).createShader(Rect.fromLTWH(0, 0, 1, 1))
..maskRect = offset & size
// The following has no problem.
// ..maskRect = (offset & size).inflate(1)
..blendMode = BlendMode.srcIn;
context.pushLayer(layer!, super.paint, offset);
} else {
layer = null;
}
}
}
It came out as device specific issue.

Custom shape tappable area with CustomPaint widget on Flutter

I’ve seen some posts with things similar to this question, but they’re not what I’m looking for. I want to create a button with a custom shape in Flutter. For that I use a CustomPaint widget inside a GestureDetector widget. The problem is that I don’t want invisible areas to be tappable. And that's exactly what happens with the GestureDetector. In others words, I just want my created shape to be tappable. But right now it seems that there's an invisible square where my custom shape is, and that is also tappable. I don't want that. The most similar issue I found in this post:
Flutter - Custom button tap area
however, in my case I’m dealing with custom shapes and not with squares or circles.
Let me share with you the code and an example image of a possible button. You could just copy it and paste it direct on your main. It should be easy to replicate my problem.
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Custom Shapes',
theme: ThemeData.dark(),
home: MyHomePage(title: 'Custom Shapes App'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
backgroundColor: Colors.white24,
body: Center(
child: GestureDetector(
child: CustomPaint(
size: Size(300,300), //You can Replace this with your desired WIDTH and HEIGHT
painter: RPSCustomPainter(),
),
onTap: (){
print("Working?");
},
),
),
);
}
}
class RPSCustomPainter extends CustomPainter{
#override
void paint(Canvas canvas, Size size) {
Paint paint_0 = new Paint()
..color = Color.fromARGB(255, 33, 150, 243)
..style = PaintingStyle.fill
..strokeWidth = 1;
paint_0.shader = ui.Gradient.linear(Offset(0,size.height*0.50),Offset(size.width,size.height*0.50),[Color(0xffffed08),Color(0xffffd800),Color(0xffff0000)],[0.00,0.34,1.00]);
Path path_0 = Path();
path_0.moveTo(0,size.height*0.50);
path_0.lineTo(size.width*0.33,size.height*0.33);
path_0.lineTo(size.width*0.50,0);
path_0.lineTo(size.width*0.67,size.height*0.33);
path_0.lineTo(size.width,size.height*0.50);
path_0.lineTo(size.width*0.67,size.height*0.67);
path_0.lineTo(size.width*0.50,size.height);
path_0.lineTo(size.width*0.33,size.height*0.67);
path_0.lineTo(0,size.height*0.50);
path_0.close();
canvas.drawPath(path_0, paint_0);
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}
I'd try that the star is the only tappable thing, and no other invisible place on the screen.
Thanks in advance!
With help of this issue https://github.com/flutter/flutter/issues/60143 and the hint given that I should use a RaisedButton with a custom shape I was able solve the problem. I did some changes to the code posted on github. Mine wasn't the best to start with. There are other better options than using a CustomPaint widget with a GestureDetector.
Here you have the code. You should be able to see that if you tap anywhere outside the shape given, the print statement will not be triggered.
import 'package:flutter/material.dart';
void main() {
runApp(App());
}
class App extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(body: Center(child: BuyTicketButton(100.0, ()=>{})))
);
}
}
class BuyTicketButton extends StatelessWidget {
final double cost;
final Function onTap;
const BuyTicketButton(this.cost, this.onTap, {Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Center(
child: Container(
height: 400,
child: RaisedButton(
shape: CustomBorder(),
onPressed: (){
print("this works");
},
),
),
);
}
}
class CustomBorder extends OutlinedBorder {
const CustomBorder({
BorderSide side = BorderSide.none
}) : assert(side != null), super(side: side);
Path customBorderPath(Rect rect) {
Path path = Path();
path.moveTo(0, 0);
path.lineTo(rect.width, 0);
path.lineTo(rect.width, rect.height);
path.lineTo(0, rect.height);
double diameter = rect.height / 3;
double radius = diameter / 2;
path.lineTo(0, diameter * 2);
path.arcToPoint(
Offset(0, diameter),
radius: Radius.circular(radius),
clockwise: false,
);
path.lineTo(0, 0);
return path;
}
#override
OutlinedBorder copyWith({BorderSide side}) {
return CustomBorder(side: side ?? this.side);
}
#override
EdgeInsetsGeometry get dimensions => EdgeInsets.all(side.width);
#override
Path getInnerPath(Rect rect, {TextDirection textDirection}) {
return customBorderPath(rect);
}
#override
Path getOuterPath(Rect rect, {TextDirection textDirection}) {
return customBorderPath(rect);
}
#override
void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {
switch (side.style) {
case BorderStyle.none:
break;
case BorderStyle.solid:
canvas.drawPath(customBorderPath(rect), Paint()
..style = PaintingStyle.stroke
..color = Colors.black
..strokeWidth = 1.0
);
}
}
#override
ShapeBorder scale(double t) => CustomBorder(side: side.scale(t));
}
This is the image you will be seeing. There, if you now tap on the half empty circle, you'll see nothing will happen. That's what I was expecting.
Nonetheless, I would recommend reading my other answer, which is for me so far better than this one.
There are for now two solutions so far, the first one is just by overriding hitTest of CustomPainter class, however the behavior is not the most desired. Because you don't have any splashcolor or similar when tapping. So here is the first one:
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
void main() {
runApp(App());
}
class App extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black54,
body: Center(
child: TappableStarButton(),
),
),
);
}
}
class TappableStarButton extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Center(
child: GestureDetector(
child: CustomPaint(
size: Size(300, 300),
painter: RPSCustomPainter(),
),
onTap: () {
print("This works");
},
),
);
}
}
class RPSCustomPainter extends CustomPainter {
Path path_0 = Path();
#override
void paint(Canvas canvas, Size size) {
Paint paint_0 = new Paint()
..color = Color.fromARGB(255, 33, 150, 243)
..style = PaintingStyle.fill
..strokeWidth = 1;
paint_0.shader = ui.Gradient.linear(
Offset(10, 150),
Offset(290, 150),
[Color(0xffff1313), Color(0xffffbc00), Color(0xffffca00)],
[0.00, 0.69, 1.00]);
path_0.moveTo(150, 10);
path_0.lineTo(100, 100);
path_0.lineTo(10, 150);
path_0.lineTo(100, 200);
path_0.lineTo(150, 290);
path_0.lineTo(200, 200);
path_0.lineTo(290, 150);
path_0.lineTo(200, 100);
canvas.drawPath(path_0, paint_0);
}
#override
bool hitTest(Offset position) {
bool hit = path_0.contains(position);
return hit;
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}
And it works. The problem is that you don't see any behavior when you tap on the "button".
The other solution, and way better, is by using Material with an Inkwell for your button. And for your shape, ShapeBorder class.
Without null safety
Here it is:
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
void main() {
runApp(App());
}
class App extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black38,
body: StarButton(),
),
);
}
}
class StarButton extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Center(
child: Container(
height: 300,
width: 300,
child: Material(
shape: StarShape(),
color: Colors.orange,
child: InkWell(
splashColor: Colors.yellow,
onTap: () => print('it works'),
),
),
),
);
}
}
class StarShape extends ShapeBorder {
#override
EdgeInsetsGeometry get dimensions => null;
#override
Path getInnerPath(Rect rect, {ui.TextDirection textDirection}) => null;
#override
void paint(Canvas canvas, Rect rect, {ui.TextDirection textDirection}) =>
null;
#override
ShapeBorder scale(double t) => null;
#override
Path getOuterPath(Rect rect, {ui.TextDirection textDirection}) {
return Path()
..moveTo(150, 10)
..lineTo(100, 100)
..lineTo(10, 150)
..lineTo(100, 200)
..lineTo(150, 290)
..lineTo(200, 200)
..lineTo(290, 150)
..lineTo(200, 100)
..close();
}
}
With null safety:
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
void main() {
runApp(const App());
}
class App extends StatelessWidget {
const App({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return const MaterialApp(
home: Scaffold(
backgroundColor: Colors.black38,
body: StarButton(),
),
);
}
}
class StarButton extends StatelessWidget {
const StarButton({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Center(
child: SizedBox(
height: 300,
width: 300,
child: Material(
shape: StarShape(),
color: Colors.orange,
child: InkWell(
customBorder: StarShape(),
splashColor: Colors.yellow,
onTap: () => print('it works'),
),
),
),
);
}
}
class StarShape extends ShapeBorder {
#override
void paint(Canvas canvas, Rect rect, {ui.TextDirection? textDirection}) {
return;
}
#override
Path getOuterPath(Rect rect, {ui.TextDirection? textDirection}) {
return Path()
..moveTo(150, 10)
..lineTo(100, 100)
..lineTo(10, 150)
..lineTo(100, 200)
..lineTo(150, 290)
..lineTo(200, 200)
..lineTo(290, 150)
..lineTo(200, 100)
..close();
}
#override
EdgeInsetsGeometry get dimensions => EdgeInsets.zero;
#override
Path getInnerPath(Rect rect, {TextDirection? textDirection}) => Path();
#override
ShapeBorder scale(double t) => StarShape();
}
It looks like this:
A GestureDetector is hit (and start detecting) when its child says it is hit (unless you chance its behavior property).
To specify when CustomPaint is hit, CustomPainter has a hitTest(Offset) method that you can override. It should return whether the Offset should be consider inside your shape. Unfortunately, the method doesn’t have a size parameter. (That’s a bug which solution has hit some inertia, see https://github.com/flutter/flutter/issues/28206)
The only good solution is to make a custom render object in which you override the paint and hitTestSelf methods (in the latter, you can use the objects size property).
For example:
class MyCirclePainter extends LeafRenderObjectWidget {
const MyCirclePainter({#required this.radius, Key key}) : super(key: key);
// radius relative to the widget's size
final double radius;
#override
RenderObject createRenderObject(BuildContext context) => RenderMyCirclePainter()..radius = radius;
#override
void updateRenderObject(BuildContext context, RenderMyCirclePainter renderObject) => renderObject.radius = radius;
}
class RenderMyCirclePainter extends RenderBox {
double radius;
#override
void performLayout() {
size = constraints.biggest;
}
#override
void performResize() {
size = constraints.biggest;
}
#override
void paint(PaintingContext context, Offset offset) {
final center = size.center(offset);
final r = 1.0 * radius * size.width;
final backgroundPaint = Paint()
..color = const Color(0x88202020)
..style = PaintingStyle.fill;
context.canvas.drawCircle(center, r, backgroundPaint);
}
#override
bool hitTestSelf(Offset position) {
final center = size.center(Offset.zero);
return (position - center).distance < size.width * radius;
}
}
Note that the top-left of the widget is at the offset parameter in the paint method, instead of the Offset.zero it is in CustomPainter.
You probably want to construct the path once and use path_0.contains(position) in hitTestSelf.

Call a setState of a statefull widget from the stateless widget

I have a stateless widget class that has a widget whose movements need to be tracked. I cannot keep this widget inside the stateful widgets as I don't want the state of this widget to be refreshed.
I have the following code.
import 'package:flutter/material.dart';
import 'package:control_pad/control_pad.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Column(
children: <Widget>[
Expanded(
child: JoystickView(
onDirectionChanged: (degree, direction) {
//Change the state here.
},
),
),
Expanded(
child: MyStateFull(),
),
],
),
);
}
}
class MyStateFull extends StatefulWidget {
#override
_MyStateFullState createState() => _MyStateFullState();
}
class _MyStateFullState extends State<MyStateFull> {
double degree = 10;
double direction = 10;
//Call this from the stateless Widget
void changedDirection(degree, direction) {
setState(() {
this.degree = degree;
this.direction = direction;
});
}
#override
Widget build(BuildContext context) {
return Container(
child: Text(
"The degree Moved is $degree and the direction is $direction",
style: TextStyle(fontSize: 25, color: Colors.black),
),
);
}
}
This code produces the following output.
I want the direction and degree values to be changed as the joystick is moved.
Thank You.
I tried it myself and found the solution. This can be done using streams. I will post the code just in case someone needs it in the future.
import 'package:flutter/material.dart';
import 'package:control_pad/control_pad.dart';
class MyStateLess extends StatelessWidget {
StreamController<List<double>> _controller = StreamController<List<double>>();
GlobalKey<_MyStateFullState> statefulKey = new GlobalKey<_MyStateFullState>();
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
JoystickView(
onDirectionChanged: (degree, direction) {
List<double> temp = new List<double>();
temp.add(degree);
temp.add(direction);
_controller.add(temp);
},
),
MyStateFull(stream: _controller.stream, key: statefulKey),
],
);
}
}
class MyStateFull extends StatefulWidget {
final Stream<List<double>> stream;
MyStateFull({Key key, #required this.stream}) : super(key: key);
#override
_MyStateFullState createState() => _MyStateFullState();
}
class _MyStateFullState extends State<MyStateFull> {
double _degree = 0.0;
double _direction = 0.0;
#override
void initState() {
super.initState();
widget.stream.listen((event) {
setState(() {
_degree = event[0];
_direction = event[1];
});
});
}
#override
Widget build(BuildContext context) {
return Container(
child: Text("$_degree, $_direction"),
);
}
}

in flutter, Need to use 'Login()' in my main.dart file. Check my dart code below:

Here's the snippet of little bit of the code
class Login extends StatefulWidget {
final double screenHeight, screenWidth;
const Login({Key key, this.screenHeight, this.screenWidth}) : super(key: key);
#override
_LoginState createState() => _LoginState();
}
class _LoginState extends State<Login> {
var _formkey = GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: PopBlue,
body: Stack(
children: <Widget>[
CustomPaint(
painter: MyCustomPainter(),
child: Container(
height: widget.screenHeight * 0.65,
),
),
...
Login class is in 1st line.
i have to use this Login class as home: Login() in my main.dart file.
i am not able to use this login class in my main code which is at main.dart file
help me finding a way to use this class in my main.dart file.
OK, I've played around a bit and come up with this which should help get you started, (tested and working on Chrome)
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) => MaterialApp(home: Login());
}
class Login extends StatefulWidget {
#override
_LoginState createState() => _LoginState();
}
class _LoginState extends State<Login> {
var _formkey = GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue, //PopBlue,
body: Stack(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height * 0.65, //widget.screenHeight * 0.65,
width: MediaQuery.of(context).size.width * 0.65,
color: Colors.red,
),
CustomPaint(
size: Size(300, 300),
painter: MyCustomPainter(),
// child: Container(
// height: MediaQuery.of(context).size.height * 0.65, //widget.screenHeight * 0.65,
// width: MediaQuery.of(context).size.width * 0.65,
// color: Colors.red, // ), ),
],
),
);
}
}
class MyCustomPainter extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
final left = 50.0;
final top = 100.0;
final right = 250.0;
final bottom = 200.0;
final rect = Rect.fromLTRB(left, top, right, bottom);
final paint = Paint()
..color = Colors.black
..style = PaintingStyle.stroke
..strokeWidth = 4;
canvas.drawRect(rect, paint);
}
#override
bool shouldRepaint(CustomPainter old) => false;
}
Your main.dart will be something like below
import 'package:flutter/material.dart';
import 'path-of-your-login-page';//import './login.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Login();
);
}
}
What do you mean by "i am not able to use this login class in my main code"?
Is the IDE reporting a problem? If so, what does it say?
Or is it failing at run time? If so, what is the error message?

change variables with setState in Flutter

I have an issue with setState() in Flutter. I just write a simple program that have a container and a button , the color of container is global variable mycolor and i change it in on_pressed function of button with setState but its doesn't change.
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: _Home(),));
Color bgColor = Colors.red;
class _Home extends StatefulWidget {
#override
__HomeState createState() => __HomeState();
}
class __HomeState extends State<_Home> {
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
//First Widget
Container(
width: 200,
height: 200,
color: bgColor,
),
//Second Widget
SecondWidget()
],
);
}
}
class SecondWidget extends StatefulWidget {
#override
_SecondWidgetState createState() => _SecondWidgetState();
}
class _SecondWidgetState extends State<SecondWidget> {
#override
Widget build(BuildContext context) {
return RaisedButton(
child: Text("Change color"),
onPressed: (){
setState(() {
bgColor = Colors.green;
});
},
);
}
}
image of my program
You are calling setState in _SecondWidgetState not in __HomeState, so only SecondWidget redraws and it does not depend on bgColor.
What you can do here: the easiest option would be to pass a callback function from __HomeState to SecondWidget, which will call setState inside __HomeState.
Example code:
class __HomeState extends State<_Home> {
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
//First Widget
Container(
width: 200,
height: 200,
color: bgColor,
),
//Second Widget
SecondWidget(callSetState);
],
);
}
void callSetState() {
setState((){}); // it can be called without parameters. It will redraw based on changes done in _SecondWidgetState
}
}
class SecondWidget extends StatefulWidget {
final Function onClick;
SecondWidget(this.onClick);
#override
_SecondWidgetState createState() => _SecondWidgetState();
}
class _SecondWidgetState extends State<SecondWidget> {
#override
Widget build(BuildContext context) {
return RaisedButton(
child: Text("Change color"),
onPressed: (){
bgColor = Colors.green;
widget.onClick();
},
);
}
}
This is simple solution for two widgets, but you will have problems if you will try to manage state on larger scale. I recommend you to read articles about state management in flutter. This one can be a good start.
You need to pass that variable to your sibling widget SecondWidget().
First you declare it on your SecondWidget like this:
class SecondWidget extends StatefulWidget {
Color backgroundColor;
SecondWidget({Key key, #required this.backgroundColor}) : super(key: key);
#override
_SecondWidgetState createState() => _SecondWidgetState();
}
You need to pass that color from _HomeState to SecondWidget, you do it like this:
class __HomeState extends State<_Home> {
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
//First Widget
Container(
width: 200,
height: 200,
color: bgColor,
),
//Second Widget
SecondWidget(backgroundColor: bgColor) // Here you pass that color
],
);
}
}
Then on your SecondWidgetState, you can update your other widget color using setState(), like this:
setState(() {
widget.backgroundColor = Colors.blue;
});
Hope this helps fix your issue.