【Flutter实战静态页面】--在线点餐app（9）——详情框架+ ClipPath 实现任意形状

原路指南

【Flutter】在线点餐APP_哔哩哔哩_bilibili

文章只作为初学者学习记

---

Flutter - 利用 ClipPath 实现任意形状 Widget_Flutter 笔记的博客-CSDN博客

flutter run --no-sound-null-safety

---

//----------------------------------------------------

//**把AppBar-->Extract  Method"detailsAppBar"*/

//**把class detailsAppBar放入app_bar.dart.dart文件中 */

//----------------------------------------------------

//**把Image-->Extract Widget"ItemImager"*/

//**把class ItemImage放入item_image.dart文件中 */

//----------------------------------------------------

//**把Container-->Wrap the Widget"Expanded"

//把Container-->Extract Widget"ItemInfo"

//----------------------------------------------------

//把Row-->Extract Method "shopName"

//----------------------------------------------------

//把Row-->Wrap the Padding

//把Padding-->Extract Widget"TitlePriceRating"

//----------------------------------------------------

//**把class TitlePriceRating和PricerCliper放入title_price_rating.dart文件中 */

//----------------------------------------------------

//**把ClipPath-->Extract  Method"priceTag"*/

//----------------------------------------------------

//**把Container按钮-->Extract Widget"OrderButton" */

//----------------------------------------------------

//**把Row-->Wrap the Widget"Material"

//----------------------------------------------------

//**把class OrderButton放入order_button.dart文件中 */

//----------------------------------------------------

//**把class Body放入body.dart文件中 */

import 'package:flutter/material.dart';
import 'package:foodordering/constants.dart';
import 'package:foodordering/screens/details/components/app_bar.dart';
import 'package:foodordering/screens/details/components/item_image.dart';

//----------------------------------------------------
//**把AppBar-->Extract  Method"detailsAppBar"*/
//**把class detailsAppBar放入app_bar.dart.dart文件中 */
//----------------------------------------------------
//**把Image-->Extract Widget"ItemImager"*/
//**把class ItemImage放入item_image.dart.dart文件中 */
//----------------------------------------------------
//**把Container-->Wrap the Widget"Expanded"
//把Container-->Extract Widget"ItemInfo"
//----------------------------------------------------
//把Row-->Extract Method "shopName"

class DetailsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: kPrimaryColor,
      appBar: detailsAppBar(),
      body: Body(),
    );
  }
}

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Column(
      children: [
        ItemImage(
          imgSrc: "assets/images/burger.png",
        ),
        Expanded(
          child: ItemInfo(),
        ),
      ],
    );
  }
}

class ItemInfo extends StatelessWidget {
  const ItemInfo({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(20),
      width: double.infinity,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(30),
          topRight: Radius.circular(30),
        ),
      ),
      child: Column(
        children: [
          shopName("MacDonalds"),
          Row(
            children: [
              Expanded(
                child: Column(
                  // crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // Text(
                    //   name,
                    //   style: Theme.of(context).textTheme.headline,
                    // ),
                    // SizedBox(height: 10),
                    // Row(
                    //   children: [
                    //     SmoothStarRating(
                    //       borderColor: kPrimaryColor,
                    //       rating: rating,
                    //       onRatingChanged: onRatingChanged,
                    //     ),
                    //     SizedBox(width: 10),
                    //     Text("$numOfReviews reviews"),
                    //   ],
                    // ),
                  ],
                ),
              ),
              //效果： ClipPath 实现任意形状
              ClipPath(
                
                clipper: PricerCliper(),
                child: Container(
                  alignment: Alignment.topCenter,
                  padding: EdgeInsets.symmetric(vertical: 15),
                  height: 66,
                  width: 65,
                  color: kPrimaryColor,
                  child: Text(
                    //"\$$price",
                    "\$15",
                     style: Theme.of(context).textTheme.headline6?.copyWith(
                    color: Colors.white, fontWeight: FontWeight.bold),
                  ),
                ),
              ),
              //priceTag(context, price: price),
            ],
          ),
        ],
      ),
    );
  }

  Row shopName(String name) {
    return Row(
      children: [
        Icon(
          Icons.location_on,
          color: ksecondaryColor,
        ),
        SizedBox(width: 10),
        Text(name),
      ],
    );
  }
}


class PricerCliper extends CustomClipper {
  @override
  Path getClip(Size size) {
    Path path = Path();
    double ignoreHeight = 20;
    path.lineTo(0, size.height - ignoreHeight);
    path.lineTo(size.width / 2, size.height);
    path.lineTo(size.width, size.height - ignoreHeight);
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) {
    return false;
  }
}