Flutter Text

Наверное, самый часто использующийся виджет — это текстовое поле, а именно виджет Flutter Text

Например, описание с официального сайта документации flutter.dev о самом виджете сообщает нам следующее:

Виджет Flutter Text имеет следующие основные свойства:

Такое свойство, как fontWeight — отвечает за толщину шрифта. Имеет следующие константы: bold — полужирный, значение около w700; normal — отображение шрифта по умолчанию; и с указанием точной величины толщины — w100, w200, w300, w400, w500, w600, w700, w800, w900 — где w900 самый толстый шрифт:

Text(
  'Этот текст будет отображаться',
  style: TextStyle(fontWeight: FontWeight.bold),
)

fontSize — размер шрифта указанный, указывается в double.

Text(
  'Этот текст будет отображаться 14 размером шрифта',
  style: TextStyle(fontSize: 14.0),
)

color — указывает, каким цветом необходимо отображать основной текст:

Text('Здесь установлен цвет текста красный - red',
  style: TextStyle(color: Colors.red),
)

Полностью пример кода для вставки в пустой проект:

import 'package:flutter/material.dart';
void main() {
  runApp(
      MaterialApp(
        debugShowCheckedModeBanner: false,
          home: App()
      ));
}
class App extends StatefulWidget {
  @override
  _AppState createState() => _AppState();
}
class _AppState extends State<App> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Пример отображения текста"),
      ),
      body: Column(
          children: <Widget>[
            Text('Здесь установлен цвет текста красный - red',
              style: TextStyle(color: Colors.red),
            )
          ],
      )
        );
  }}

fontStyle: FontStyle.italic — отображает текстовую строку курсивом.

свойство height — определяет высоту текстового поля. Если данное свойство равно нулю или не указано, то высота строки определяется размером шрифта, указанным в fontSize. Посмотрите какую наглядную картинку дает официальная документация Flutter:

wordSpacing — используется для увеличения пробела между словами. Например, wordSpacing: 15.0, в нашем примере, будет выглядеть следующим образом:

В wordSpacing можно установить и отрицательное значение, для сближения слов между собой

Если вам необходимо перенести часть текста (предложения) на другую строчку, то вы можете вставить внутрь строки \n — эта команда вставит абзац в ваш текст.

Text('Здесь установлен \n цвет текста красный - red'

Кроме Flutter Text есть еще RichText

Данный виджет используется, если необходимо отобразить в тексте несколько стилей. Каждый отдельный текст описывается с помощью TextSpan, в котором мы указываем необходимые нам стили. Для того, чтобы не усложнять визуально код, старайтесь использовать для основного текста — стиль принятый по умолчанию, а для отличия — TextSpan:

RichText(
  text: TextSpan(
    text: 'Пример применения стилей - ',
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(text: 'жирный', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: ' и'),
 TextSpan(text: 'курсив', style: TextStyle(fontStyle: FontStyle[1])),
    ],
  ),
)

Здесь есть важное свойство textAlign — это свойство отвечает за то, как выровнен текст относительно самого блока (виджета). Он имеет следующие константы:

textAlign.center — выравнивает текст по середине блока; textAlign.end — по правому краю блока; textAligh.left — по левому краю.

Значения start и right — в простых строках аналогичны left и end соответственно.

Выход за рамки — Flexible

Если вам придется работать с текстом, который выходит за рамки контейнера, вы можете обернуть виджет Flutter Text в виджет Flexible.

При необходимости, вы можете создать рамку вокруг текст используя стандартное «оборачивание» BoxDecoration

Flutter Icons вместо текста

Напоследок, если вместо текста вы хотите использовать иконки, читайте нашу статью про Flutter Icons