需要帮助来构建flutter中的自定义小部件

bvjveswy  于 2023-01-14  发布在  Flutter
关注(0)|答案(1)|浏览(214)

嘿,我试着创建一个自定义的小部件,像这样,在那里我可以改变卡片底部的文本。

我已经创建了形状,但我不知道如何放置Text('Aktif'),我尝试使用堆栈或列,但没有工作,任何想法?
下面是我的代码:

@override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Card(
          shape: CardShape(),
          elevation: 18,
          shadowColor: const Color.fromRGBO(51, 0, 0, 0.1),
          color: CustomStyle.primaryRed,
          child: Container(
            decoration: BoxDecoration(
                color: CustomStyle.white,
                border: Border.all(color: CustomStyle.primaryRed),
                borderRadius: BorderRadius.circular(8)),
            padding: const EdgeInsets.symmetric(vertical: 8),
            child: ListTile(
              title: const Text('Rumah Tanggerang'),
              subtitle: const Text('Primary - 1234567890'),
              trailing: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Text(
                    'DEFAULT',
                  ),
                  myPopMenu()
                ],
              ),
            ),
          ),
        ),
        Positioned(left: 10, bottom: 0, child: Text('Aktif'))
      ],
    );
  }
class CardShape extends ShapeBorder {
  const CardShape();

  final BorderSide _side = BorderSide.none;
  final BorderRadiusGeometry _borderRadius = BorderRadius.zero;

  @override
  EdgeInsetsGeometry get dimensions => EdgeInsets.all(_side.width);

  @override
  Path getInnerPath(
    Rect rect, {
    TextDirection? textDirection,
  }) {
    final Path path = Path();

    path.addRRect(
      _borderRadius.resolve(textDirection).toRRect(rect).deflate(_side.width),
    );

    return path;
  }

  @override
  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
    final Path path = Path();
    final RRect rrect = _borderRadius.resolve(textDirection).toRRect(rect);

    path.moveTo(0, 10);
    path.quadraticBezierTo(0, 0, 10, 0);
    path.lineTo(rrect.width - 10, 0);
    path.quadraticBezierTo(rrect.width, 0, rrect.width, 10);
    path.lineTo(rrect.width, rrect.height - 10);
    path.quadraticBezierTo(
        rrect.width, rrect.height, rrect.width - 10, rrect.height);
    path.lineTo(100, rrect.height);
    path.lineTo(80, rrect.height + 20);
    path.lineTo(10, rrect.height + 20);
    path.quadraticBezierTo(0, rrect.height + 20, 0, rrect.height + 10);

    return path;
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) {}

  @override
  ShapeBorder scale(double t) => RoundedRectangleBorder(
        side: _side.scale(t),
        borderRadius: _borderRadius * t,
      );
}
juzqafwq

juzqafwq1#

Card小部件不能使用堆栈,因为红色容器已经在Card元素之外,因此要放置文本,您只需将Stack Package 在Column中,然后放置Text小部件,而不放置position,这是我已经做过的示例

class Test extends StatelessWidget {
  const Test({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          decoration: const BoxDecoration(color: Colors.blue),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Stack(
                children: [
                  Card(
                    shape: const CardShape(),
                    elevation: 18,
                    shadowColor: const Color.fromRGBO(51, 0, 0, 0.1),
                    color: Colors.red,
                    child: Container(
                      decoration: BoxDecoration(
                          color: Colors.white,
                          border: Border.all(color: Colors.red),
                          borderRadius: BorderRadius.circular(8)),
                      padding: const EdgeInsets.symmetric(vertical: 8),
                      child: ListTile(
                        title: const Text('Rumah Tanggerang'),
                        subtitle: const Text('Primary - 1234567890'),
                        trailing: Row(
                          mainAxisAlignment: MainAxisAlignment.end,
                          mainAxisSize: MainAxisSize.min,
                          children: const <Widget>[
                            Text(
                              'DEFAULT',
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ],
              ),
              const Padding(
                padding: EdgeInsets.only(
                  left: 30,
                ),
                child: Text(
                  'Aktif',
                  style: TextStyle(
                      color: Colors.white, fontWeight: FontWeight.w700),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

如果你复制了我的代码,请确保改回你使用的颜色。

相关问题