如何用颤振创建六边形容器与这张照片相同

Question

如何创建与这张照片相同的六边形容器

Answer 1

可以使用Stack 和Container's decoration 使用bottomLeft 进行归档。

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

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

class _AWTState extends State<AWT> {
  final border = const BorderRadius.only(
    bottomLeft: Radius.circular(140),
  );

  clickTest(int index) => OutlinedButton(
      onPressed: () {
        print("tap Event from $index");
      },
      child: Text("Click test"));
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        backgroundColor: Colors.pink.shade100,
        elevation: 0,
      ),
      body: LayoutBuilder(
        builder: (context, constraints) {
          final boxheight = constraints.maxHeight / 6;
          return Stack(
            children: [
              //4th container
              Container(
                height: (boxheight * 4) + kToolbarHeight,
                alignment: Alignment.bottomCenter,
                decoration: BoxDecoration(
                  color: Colors.deepPurple,
                  borderRadius: border,
                ),
                child: clickTest(4),
              ), //3rd container
              Container(
                height: (boxheight * 3) + kToolbarHeight,
                alignment: Alignment.bottomCenter,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: border,
                ),
                child: clickTest(3),
              ), //second container
              Container(
                height: (boxheight * 2) + kToolbarHeight,
                alignment: Alignment.bottomCenter,
                decoration: BoxDecoration(
                  color: Colors.pink.shade300,
                  borderRadius: border,
                ),
                child: clickTest(2),
              ),
              // top container
              Container(
                alignment: Alignment.bottomCenter,
                height: boxheight,
                decoration: BoxDecoration(
                  color: Colors.pink.shade100,
                  borderRadius: border,
                ),
                child: clickTest(1),
              ),
            ],
          );
        },
      ),
    );
  }
}