Последнее обновление:

Все, что нужно знать о работе с текстом во Flutter

Flutter

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

Вот несколько ответов на вопросы, которые обычно возникают при работе с текстом.

Как изменить шрифт текста?

Виджет Text имеет важный параметр, называемый стилем. При этом используется TextStyle виджет, который позволяет добавлять стили к шрифту. Как вы можете видеть ниже, для этого есть несколько свойств, в том числе fontSize, fontWeight, fontFamily и fontStyle.

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Center(
          child: Text(
            'VOGUE',
            textAlign: TextAlign.center,
            style: TextStyle(
                fontWeight: FontWeight.w100,
                fontSize: 100,
                fontFamily: 'Vogue',
                color: Colors.white),
          ),
        ),
      ),
    );
  }
}

Размер шрифта fontSize принимает double значение. Толщина шрифта принимает класс FontWeight, который содержит готовые значения различных уровней толщины, от FontWeight.w100 до FontWeight.w900, причем последний является самым толстым, а fontFamily принимает строку с названием шрифта, который вы хотите использовать.

Как использовать собственные шрифты с виджетом Text ?

Чтобы использовать собственный шрифт, вы должны сначала загрузить шрифт .ttf в папку в свой проект. Затем вы делаете ссылку на него в файле pubspec.yaml.

flutter:  
  fonts:
    - family: Vogue
      fonts:
        - asset: fonts/Vogue.ttf

В моем проекте я создал папку fonts в корне проекта и поместил в нее шрифт Vogue.ttf. Имя, которое вы ему даете может быть любым. Итак, в моем случае в виджете Text я установил fontFamily как Vogue.

Как добавить отступы к тексту?

Чтобы добавить отступ к тексту, вы оборачиваете свой текстовый виджет в виджет Padding.

class TextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text(
          'Hello',
          style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 40,
              fontFamily: 'Roboto',
              color: Colors.white),
        ),
      ),
    );
  }
}

Интересующее нас свойство padding предлагает несколько опций, облегчающих жизнь.

  • EdgeInset.all (8) - добавляет отступы со всех сторон
  • EdgeInsets.only (left: 8) - добавляет отступ только с одной стороны и может принимать значения left, right, top, bottom
  • EdgeInsets.symmetric (vertical: 8, horizontal: 0) - добавляет одинаковое количество отступов к противоположным сторонам.

Как сделать текст интерактивным?

Иногда необходимо, чтобы при нажатии на текст происходили какие-то события. Сам по себе виджет Text не отслеживает нажатия. Однако это можно решить, обернув его в GestureDetector или InkWell.

class TextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: GestureDetector(
        onTap: () {
          print('tapped');
        },
        child: Text(
          'Hello',
          style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 40,
              fontFamily: 'Roboto',
              color: Colors.white),
        ),
      ),
    );
  }
}

GestureDetector позволяет вашему тексту реагировать на касания с помощью фильтров касаний, таких как onTapUp, onTapCancel, onHorizontalDragDown, onSecondaryLongPressUp и onLongPressStart. Таким образом можно настроить тип касаний на которые будет срабатывать виджет.

Как сделать перенос текста?

Бывает так, что текст, вместо того чтобы заполнить все доступное пространство, например, Container, вытягивается в одну строку. Это очень просто исправить. Чтобы наш текст не растягивался бесконечно, мы используем свойство виджета Text, под названием softWrap. По умолчанию оно установлено в значение true.

В приведенном ниже коде показано, как было создано правое изображение выше.

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          width: 400,
          height: 400,
          decoration: BoxDecoration(
              border: Border.all(color: Colors.white)
          ),
          child: Text(
            'This is a really really really really really really really really really really really really really really really really really really long sentence ',
            style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 40,
                fontFamily: 'Roboto',
                color: Colors.white),
          softWrap: true,  // здесь происходит волшебство (установите в true)
          ),
        ),
      ),
    );
  }
}

Как сделать текст ссылкой?

На данный момент самый простой способ сделать это - использовать плагин. Рекомендую url_launcher. Как и раньше, мы используем детектор жестов, чтобы отследить клик по ссылке. Итак, onTap мы вызываем _launchURL(), который позволяет нам открыть URL-адрес в браузере на нашем устройстве. Однако, если вы установите forceWebView: true на устройстве Android, он откроет webview внутри приложения.

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: GestureDetector(
        onTap: _launchURL,  //открываем ссылку по клику
          child: Text(
            'This is a link',
            style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 40,
                fontFamily: 'Roboto',
                color: Colors.white),
          ),
        ),
      ),
    );
  }

  _launchURL() async {
  const url = 'https://www.google.com';  //наша ссылка
  if (await canLaunch(url)) {  //проверяем наличие браузера на устройстве
    await launch(url, forceWebView: true);   //true если открываем в приложении, false открываем в браузере
    } else {
      throw 'Could not launch $url';
    }
  }
}

Как разрешить пользователям выделять и копировать текст?

выделяем и копируем текст во Flutter

По умолчанию вы не можете выделять и копировать текст с помощью виджета Text. К счастью, во Flutter есть виджет SelectableText, который позволяет вам захватывать и копировать текст. Он похож на виджет Text, но обеспечивает более интерактивное поведение. Например, вы можете установить cursorWidth, cursorHeight, cursorColor и dragStartBehavior.

Как использовать переменные в тексте?

Конкатенация строк в Dart довольно проста. Все, что вам нужно сделать, как показано в коде ниже, - это поставить $ , а затем переменную в фигурных скобках.

class _MyHomePageState extends State<MyHomePage> {
String name = "Serena"; // определяем переменную

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: SelectableText(
        "It is ${name}'s turn to serve.", // наша переменная
          style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 40,
              fontFamily: 'Roboto',
              color: Colors.white),
        ),
      ),
    );
  }
}

Как использовать несколько стилей в одной строке?

несколько стилей в одной строке текста
На изображении выше имя специально выделено другим стилем. Как показано во фрагменте ниже, Text.rich позволяет разбивать встроенный текст на отдельные компоненты, с которыми вы затем можете работать индивидуально. Стиль всей строки определен базовым стилем текста. Однако мы переопределяем его для имени.

class _MyHomePageState extends State<MyHomePage> {
String name = "Serena";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Text.rich(
          TextSpan(text: "It is ", children: <TextSpan>[
            TextSpan(
              text: "$name's ",
                style: TextStyle(
                color: Colors.redAccent, // переопределяем цвет
                fontSize: 100, // переопределяем размер
                fontWeight: FontWeight.bold,  // переопределяем "жирность" шрифта
                )),
            TextSpan(text: "turn to serve.")
          ]),
          style: TextStyle(
              fontWeight: FontWeight.w100,
              fontSize: 30,
              fontFamily: 'Roboto',
              color: Colors.white),
        ),
      ),
    );
  }
}

Как сделать вертикальный текст?

вертикальный текст
Для достижения такого эффекта мы сначала разбиваем нашу строку на массив строк и создаем виджет Text для каждой из них. Затем мы складываем их друг на друга, как блоки Lego, используя Wrap. Критической точкой в этом случае является свойство direction, в котором мы устанавливаем направление нашего виджета - в нашем случае оно вертикальное.

class _MyHomePageState extends State<MyHomePage> {
  String myText = "0123456789";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Wrap(
          alignment: WrapAlignment.center,
        direction: Axis.vertical,  //вертикальный текст
          children: _arrayOfText(),
        ),
      ),
    );
  }

List<Text> _arrayOfText() { //разрезаем наш текст на кусочки
    return myText
        .split("")
        .map((letter) => Text(
              letter,
              textAlign: TextAlign.center,
              style: TextStyle(
                  fontWeight: FontWeight.w100,
                  fontSize: 40,
                  color: Colors.white),
            ))
        .toList();
  }
}

Добавьте эту страницу в закладки и используйте в качестве шпаргалки.

Комментарии