Выделение текста с закругление по примеру в Flutter,Dart

Question

*Как сделать такое выделение на Dart во Flutter (под Android, если кому важно). Это пример скринов от Google на Kotlin, вот код https://github.com/googlearchive/android-text/tree/master/RoundedBackground-Kotlin * *Это просто текстовое окно TextView *

Answer 1

Такое во Flutter сделать достаточно легко с помощью RichText и WidgetSpan (альтернатива TextSpan, которую можно кастомить более гибко). Просто в WidgetSpan вы сделаете свой Text и обернете его в Container, который будет задавать нужный фон и границы для текста.

Написал вам пример экрана с подобным текстом, чтобы был понятен принцип, а вы уже под себя настроите по такому же принципу:

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

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RichText(
          text: TextSpan(
            children: [
              WidgetSpan(
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.lightBlueAccent,
                    borderRadius: BorderRadius.circular(8),
                    border: Border.all(color: Colors.black),
                  ),
                  padding: const EdgeInsets.all(6),
                  child: Text(
                    'Text highlighted',
                    style: TextStyle(
                      color: Colors.black,
                      fontSize: 18,
                    ),
                  ),
                ),
              ),
              WidgetSpan(
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.transparent,
                    borderRadius: BorderRadius.circular(8),
                    border: Border.all(color: Colors.transparent),
                  ),
                  padding: const EdgeInsets.all(6),
                  child: Text(
                    'Text highlighted',
                    style: TextStyle(
                      color: Colors.black,
                      fontSize: 18,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

БЛОГ НА HUSL

Выделение текста с закругление по примеру в Flutter,Dart

Ответы (1 шт):