dart - 在 Flutter 中创建尖头/斜面小部件

Question

如何在 Flutter 中创建这种斜面形状？它应该支持一个 child ，当 child 大小改变时， child 可以居中和缩放。

Answer 1

您可以通过将 ClipPath 与 BeveledRectangleBorder 一起使用来实现此目的

示例

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Shape',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CustomShapeDemo(),
    );
  }
}

class CustomShapeDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Custom Shape Demo'),
        ),
        body: Center(
          child: ClipPath(
            clipper: ShapeBorderClipper(
              shape: BeveledRectangleBorder(
                  borderRadius: BorderRadius.circular(100.0)),
            ),
            child: Container(
              height: 200.0,
              width: 400.0,
              color: Colors.red,
              child: Center(
                child: Text('80',
                    style: TextStyle(color: Colors.white, fontSize: 85.0)),
              ),
            ),
          ),
        ));
  }
}

结果