Пользовательская форма контейнера во флаттере

Question

Хочу сделать такой экран во флаттере:

ht tps:https://stackru.com/images/e3f951c6333a29e1354e6c098430d91d5278a526.jpg

Может ли кто-нибудь подсказать, как я могу сделать такие контейнеры в трепетании и таким дизайном, заранее спасибо.

Answer 1

Вы можете придать своим контейнерам произвольную форму с помощью класса ClipPath.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: ClipPath(
            child: Container(color: Colors.red),
            clipper: MyCustomClipper(),
          ),
        ),
      ));
  }
}

class MyCustomClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path()
        ..lineTo(size.width, 0)
        ..lineTo(size.width, size.height/2)
        ..lineTo(size.width/2, size.height)
        ..lineTo(0, size.height)
        ..close();
      
    return path;
  }

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