Flutter 中文本字段的背景

Question

我想在 Flutter 中为我的文本字段创建背景。我可以使用哪些不同的方法？类似于这个例子👇

我有这个：

但它不是圆形的...

Answer 1

我不知道你是否绝对想使用Paint()，但这是我没有它的解决方案。

import 'package:flutter/material.dart';

class CustomText extends StatelessWidget {
  const CustomText({required this.text, super.key});

  final String text;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          margin: const EdgeInsets.all(5.0),
          padding: const EdgeInsets.symmetric(horizontal: 10.0),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(30.0),
            color: Colors.red,
          ),
          child: Transform.translate(
            offset: const Offset(0.0, -6.0), // Change the 2e value to up and down the text
            child: Text(
              text,
              style: const TextStyle(shadows: [
                Shadow(
                  color: Colors.black,
                  offset: Offset(2.0, 3.0),
                ),
              ], fontSize: 25),
            ),
          ),
        ),
      ],
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Wrap(
        children: [
          CustomText(text: 'Define your background'),
          CustomText(text: 'color and text position'),
          CustomText(text: ' with the second'),
          CustomText(text: ' argument of OffSet'),
        ],
      ),
    );
  }
}

看起来像这样

文本的阴影也可以使用第二个偏移量进行修改