flutter - 颤动：我想要顶部的曲线夹

问题描述

我在容器中使用了多条曲线，但它显示在底部。如何设置在上面？请帮我。

这是我的代码。

import 'package:evillage_app/style/style.dart';
import 'package:flutter/material.dart';

class MenuCard extends StatefulWidget {
  const MenuCard({Key? key}) : super(key: key);

  @override
  _MenuCardState createState() => _MenuCardState();
}

class _MenuCardState extends State<MenuCard> {
  List menuService = [
    {'name': 'ASAA', 'icon': 'assets/icon/ASAA.png'},
    {'name': 'INFO INDIA', 'icon': 'assets/icon/Info India.png'},
    {'name': 'BUSINESS', 'icon': 'assets/icon/business.png'},
    {'name': 'E-DIARY', 'icon': 'assets/icon/e Diary.png'},
    {'name': 'NEWS', 'icon': 'assets/icon/News.png'},
    {'name': 'SERVICES', 'icon': 'assets/icon/Service.png'},
  ];
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        ClipPath(
          clipper:SkewCut() ,
          child: Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.width / 1.58,
            decoration: BoxDecoration(gradient: menuGradient),
            child: GridView.count(
              crossAxisCount: 2,
              childAspectRatio: (2 / 0.75),
              crossAxisSpacing: 2,
              mainAxisSpacing: 5,
              physics: ScrollPhysics(),
              padding: EdgeInsets.symmetric(
                  horizontal: MediaQuery.of(context).size.width / 30,
                  vertical: 13),
              children: List.generate(
                menuService.length,
                (index) {
                  return Container(
                      child: Card(
                    shadowColor: Colors.grey,
                    elevation: 4,
                    child: Container(
                        width: MediaQuery.of(context).size.width / 1,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(25)),
                          color: Colors.white,
                        ),
                        child: ListTile(
                          leading: CircleAvatar(
                            // backgroundColor: red,
                            backgroundImage:
                                AssetImage(menuService[index]['icon']),
                          ),
                          contentPadding: EdgeInsets.only(left: 15),
                          title: Text(
                            menuService[index]['name'].toString(),
                            style: labelStyle(),
                            overflow: TextOverflow.ellipsis,
                          ),
                        )),
                  ));
                },
              ),
            ),
          ),
        ),
      ],
    );
  }
}

class SkewCut extends CustomClipper<Path> {
  @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(SkewCut oldClipper) => false;
}

这是截图

标签： flutterflutter-layoutflutter-dependenciesflutter-animationflutter-test

flutter - 颤动：我想要顶部的曲线夹

问题描述

解决方案

推荐阅读