Блог

Я новичок в Flutter и Dart, и я работаю над созданием пользовательской панели навигации. Что я хотел бы знать, так это как я могу использовать flutter для преобразования прямоугольника в такую форму?

Любая помощь или руководства по пользовательским виджетам, нарисованным на заказ, очень ценятся!

ClipPath может быть решением для вас, и вы можете создавать пользовательские клипперы, подобные этому :

 class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path myPath = Path();
    myPath.lineTo(0.0, size.height);

    myPath.quadraticBezierTo(
        size.width / 4,
        size.height / 1.2,
        size.width / 2,
        size.height / 1.2
    );
    myPath.quadraticBezierTo(
        size.width - (size.width / 4),
        size.height / 1.2,
        size.width,
        size.height);
    myPath.lineTo(size.width, 0.0);
    return myPath;
  }

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

  

Я опубликовал весь свой код ниже, вы можете поиграть с ним и преобразовать в то, что вам нужно :

 import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          child: Center(
              child: ClipPath(
            clipper: MyClipper(),
            child: Container(
              height: 200,
              width: 300,
              color: Colors.black26,
            ),
          )),
        ),
      ),
    );
  }
}

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path myPath = Path();
    myPath.lineTo(0.0, size.height);

    myPath.quadraticBezierTo(
        size.width / 4,
        size.height / 1.2,
        size.width / 2,
        size.height / 1.2
    );
    myPath.quadraticBezierTo(
        size.width - (size.width / 4),
        size.height / 1.2,
        size.width,
        size.height);
    myPath.lineTo(size.width, 0.0);
    return myPath;
  }

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