flutter - 如何在 Flutter 中的图像中添加波浪效果

Question

如何在 Flutter 中的图像中添加波浪效果。我希望在图像中添加的效果是第一个屏幕中的

编辑：自定义剪裁器可以帮助我完成这项任务

标签： flutterflutter-layout

Answer 1

看一下这个！

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: const Color.fromARGB(255,0,0,255),
        primaryColorDark: const Color(0xFF167F67),
        accentColor: const Color(0xFF02BB9F),
      ),
      home: MyHomePage(title: 'Flutter Clip Path',),
    );
  }
}
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(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text(widget.title,style: TextStyle(color:Colors.white),),
      ),
      body: Padding(
         padding: const EdgeInsets.all(0.0),
        child: ClipPath(
          child: Container(
            width: MediaQuery.of(context).size.width,
            height: 400,
            color: Colors.orange,
          ),
          clipper: CustomClipPath(),
        ),
      ),
    );
  }
}

class CustomClipPath extends CustomClipper<Path> {
  var radius=10.0;
@override
  Path getClip(Size size) {
    Path path = Path();
    path.lineTo(0, size.height);
    path.quadraticBezierTo(size.width/4, size.height
 - 40, size.width/2, size.height-20);
    path.quadraticBezierTo(3/4*size.width, size.height,
 size.width, size.height-30);
    path.lineTo(size.width, 0);

    return path;
  }
  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

输出看起来像你的第一个屏幕，