Why CustomClipper is not working suddenly? - dart

Question

I'm studying clipping image as curve, but CustomClipper is not working suddenly.
Only clipper property of IreneClipper not works. How can I fix it?
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Clock',
theme: ThemeData(
primarySwatch: Colors.blue
),
home: IreneClip(),
);
}
}
class IreneClip extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(backgroundColor: Colors.orange,),
body: ClipPath(
child: Image.asset('assets/irene.jpg'),
clipper: IreneClipper(),
),
);
}
}
class IreneClipper extends CustomClipper<Path> {
#override
Path getClip(Size size) {
Path path = Path();
path.moveTo(0.0, size.height);
return Path();
}
#override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return false;
}
}
Error message
I/flutter (25014): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY
╞═════════════════════════════════════════════════════════ I/flutter
(25014): The following assertion was thrown during performLayout():
I/flutter (25014): The _ScaffoldLayout custom multichild layout
delegate forgot to lay out the following child: I/flutter (25014):
_ScaffoldSlot.body: RenderClipPath#ab20f NEEDS-LAYOUT NEEDS-PAINT I/flutter (25014): Each child must be laid out exactly once. I/flutter
(25014): I/flutter (25014): When the exception was thrown, this was
the stack: I/flutter (25014): #0
MultiChildLayoutDelegate._callPerformLayout.
(package:flutter/src/rendering/custom_layout.dart:222:13) I/flutter
(25014): #1 MultiChildLayoutDelegate._callPerformLayout
(package:flutter/src/rendering/custom_layout.dart:230:8)
Flutter doctor
[√] Flutter (Channel beta, v1.0.0, on Microsoft Windows [Version 10.0.17134.472], locale ko-KR)
• Flutter version 1.0.0 at C:\flutter
• Framework revision 5391447fae (5 weeks ago), 2018-11-29 19:41:26 -0800
• Engine revision 7375a0f414
• Dart version 2.1.0 (build 2.1.0-dev.9.4 f9ebf21297)
[√] Android toolchain - develop for Android devices (Android SDK 28.0.3)
• Android SDK at C:\AndroidSDK
• Android NDK location not configured (optional; useful for native profiling support)
• Platform android-28, build-tools 28.0.3
• ANDROID_HOME = C:\AndroidSDK
• Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1136-b06)
• All Android licenses accepted.
[√] Android Studio (version 3.2)
• Android Studio at C:\Program Files\Android\Android Studio
• Flutter plugin version 31.3.1
• Dart plugin version 181.5656
• Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1136-b06)
[!] IntelliJ IDEA Community Edition (version 2018.2)
• IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2018.2
X Flutter plugin not installed; this adds Flutter specific functionality.
X Dart plugin not installed; this adds Dart specific functionality.
• For information about installing plugins, see
https://flutter.io/intellij-setup/#installing-the-plugins
[!] VS Code, 64-bit edition (version 1.30.1)
• VS Code at C:\Program Files\Microsoft VS Code
• Flutter extension not installed; install from
https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[√] Connected device (1 available)
• Android SDK built for x86 • emulator-5554 • android-x86 • Android 9 (API 28) (emulator)

Answer 1

I solved, shouldReclip method must return true if you want to hot reload clipping image.
class IreneClipper extends CustomClipper<Path> {
#override
Path getClip(Size size) {
Path path = Path();
path.lineTo(0.0, size.height-40);
path.lineTo(size.width, size.height-60);
path.lineTo(size.width, 0.0);
path.close();
return path;
}
#override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return true;
}
}

Answer 2

You need to wrap it with like:
Column(
children: [
SafeArea(
child: SingleChildScrollView(
child: Column(
children: [
Stack(
clipBehavior: Clip.none,
children: <Widget>[
// stack overlaps widgets
ClipPath(
clipper: YOURCUSTOMCLIPPER(),
child: Container(
width: MediaQuery.of(context).size.width,
height: 140,
color: Colors.red,
),
),
],
),
],
),
),
),
],
),