Newbie - Need Help

  1. I am an IOS developer trying to use flutter for a project and i have created a custom navigation view which covers half the screen, but i don’t know how to put an image inside that view

2 i have used custom Painter to create the required look and i tried using stack view which didn’t produce the expected results

can someone point me in the right direction ,Thank you !!

Can you show us what have you tried so far?
Also an image can be helpful in this case

i don’t have an image currently but my basic question is how to show one image widget inside another container which has custom painter, like a rectangle covering half the screen and a round image between the rectangle, the rectangle shape drawn with custom painter class and i need to show an image inside it , i used “Center” widget on the image but it shows it in the center of the screen instead in the center of the rectangle

here’s my code, i need a circular image in the center of the design this code creates

import ‘package:flutter/material.dart’;

main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘Drawing Paths’,
home: Container(
color: Colors.white,
child: CustomPaint(
painter: CurvePainter(),
),
),
);
}
}

class CurvePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {

Rect rect = new Rect.fromCircle(
  center: new Offset(165.0, 55.0),
  radius: 180.0,
);

// a fancy rainbow gradient
final Gradient gradient = new LinearGradient (
  colors: <Color>[
   Colors.indigo.withOpacity(1.0),
    Colors.green
  ],
  stops: [
    0.5,
    1.0
  ],
);



var paint = Paint()..shader = gradient.createShader(rect);

paint.color = Colors.green[800];
paint.style = PaintingStyle.fill; // Change this to fill

var path = Path();
path.moveTo(0, size.height * 0.30);
path.quadraticBezierTo(
    size.width / 2, size.height / 2, size.width, size.height * 0.30);
path.lineTo(size.width, 0);
path.lineTo(0, 0);

canvas.drawPath(path, paint);

}

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

Hey @Afzal_Shaikh Welcome to Flutter! Hope you have fun.

I have seen your code snippet but I cannot see the image for code anywhere? Please share what you have tried so far to put the image.

Also I think the STack widget combined with Positioned Widget may help you.

Hey yes I’ve changed the code and used stack
But currently it’s hard coded I want it to adapt itself for different screen sizes if you can help me with that , That’d be great , Thanks

import ‘package:flutter/material.dart’;

main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘Drawing Paths’,
home: Container(
color: Colors.white,
child: Stack(
alignment: Alignment.topCenter,
children: [
CustomPaint(
size: Size(700, 700),
painter: CurvePainter()),
Positioned(
height: 100,
width: 100 ,
left: 150,
top: 130,
child: CircleAvatar(
backgroundImage: AssetImage(‘images/logo.jpeg’),
))
],
),
),
);
}
}

class CurvePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {

Rect rect = new Rect.fromCircle(
  center: new Offset(165.0, 55.0),
  radius: 180.0,
);

// a fancy rainbow gradient
final Gradient gradient = new LinearGradient (
  colors: <Color>[
   Colors.indigo.withOpacity(1.0),
    Colors.green
  ],
  stops: [
    0.5,
    1.0
  ],
);



var paint = Paint()..shader = gradient.createShader(rect);

paint.color = Colors.green[800];
paint.style = PaintingStyle.fill; // Change this to fill

var path = Path();
path.moveTo(0, size.height * 0.30);
path.quadraticBezierTo(
    size.width / 2, size.height / 2, size.width, size.height * 0.30);
path.lineTo(size.width, 0);
path.lineTo(0, 0);

canvas.drawPath(path, paint);

}

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

Instead of using 700,700 use MediaQuery.of(context).size.width*0.60 similarly for height, so this willadapt according to the device size.

i tried that, It returns an error as follows

Flutter Error: MediaQuery.of() called with a context that does not contain a MediaQuery

@Afzal_Shaikh MediaQuery is used by Scaffold internal components to layout its children as evident from its source code.

You will have to wrap your container with a Scaffold Widget.

Sorry, but i am still getting the same error after using scaffold class
and about the scaffold class, i though the “MaterialApp” provides the MediaQuery according to the docs.IF you can explain more about it , it will be a great help , Thank you