Встроенные виджеты

Text

Виджет Text предназначен для отображения строки текста. Для создания виджета и его установки можно использовать следующий его конструктор:

Text(String data, {Key key, TextStyle style, StrutStyle strutStyle, TextAlign textAlign, TextDirection textDirection, 
	Locale locale, bool softWrap, TextOverflow overflow, double textScaleFactor, int maxLines, String semanticsLabel, 
	TextWidthBasis textWidthBasis, TextHeightBehavior textHeightBehavior})

Основные параметры виджета:

• text: собственно текст виджета

• style: определяет стиль текста, в частности, цвет текста, фона, семейство шрифтов, размер шрифта и т.д. Представляет объект класса TextStyle

• strutStyle: устанавливает минимальную высоту строки относительно базовой линии. Представляет класс StrutStyle

• textAlign: устанавливает горизонтальное выравнивание. Представляет перечисление TextAlign и может принимать следующие значения:

  • TextAlign.center: выравнивание по центру

  • TextAlign.left: выравнивание по левому краю контейнера

  • TextAlign.right : выравнивание по правому краю контейнера

  • TextAlign.justify: растяжение текста по всей длине строки

  • TextAlign.end: выравнивание в конце строки. Для текста слева направо это правый край контейнера, а для текста справа налево это левый край контейнера

  • TextAlign.start: выравнивание в начале строки. Для текста слева направо это левый край контейнера, а для текста справа налево это правый край контейнера

• textDirection: задает направление текста. Представляет перечисление TextDirection. Основные значения: TextDirection.ltr (текст слева направо) и TextDirection.rtl (справа налево)

• locale: устанавливает локаль или, грубо говоря, язык. Представляет объект класса Locale

• softWrap: определяет, будет ли тест переноситься на следующую строку при достижении отведенной для его длины.

• overflow: определяет, как текст будет усекаться при превышение доступной длины. Представляет перечисление TextOverflow

• textScaleFactor: определяет количество пикселей шифта для каждого логического пикселя.

• maxLines: определяет максимальное количество строк текста

• textWidthBasis: определяет способ измерения ширины текста. Представляет перечисление TextWidthBasis.

• textHeightBehavior: определяет, как будет применяться значение TextStyle.height к первой и последней строкам текста. Представляет класс TextHeightBehavior.

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

Используем ряд свойств и определим простой Text:

import 'package:flutter/material.dart';

void main() {
  runApp(Container(
    padding: EdgeInsets.only(top:25, left:10, right:10),
    color: Colors.white,
    child: Text("Hello Flutter from Metanit.com",
        textDirection: TextDirection.ltr,		// текст слева направо
        textAlign: TextAlign.center,			// выравнивание по центру
        style: TextStyle(color: Colors.green,	// зеленый цвет текста
            fontSize: 26,						// высота шрифта 26
            backgroundColor: Colors.black87		// черный цвет фона текста
        )
      )
    )
  );
}

Стиль текста

Стиль текста описывается параметром style, который представляет класс TextStyle. Этот класс позволяет задать очень много настроек отображения текст. Он имеет следующий конструктор:

TextStyle({bool inherit: true, Color color, Color backgroundColor, double fontSize, FontWeight fontWeight, FontStyle fontStyle, 
double letterSpacing, double wordSpacing, TextBaseline textBaseline, double height, Locale locale, Paint foreground, 
Paint background, List<Shadow> shadows, List<FontFeature> fontFeatures, TextDecoration decoration, Color decorationColor, 
TextDecorationStyle decorationStyle, double decorationThickness, String debugLabel, String fontFamily, 
List<String> fontFamilyFallback, String package})

Рассмотрим вкратце некоторые параметры конструктора:

• inherit: указывает, будет ли данный стиль наследовать свойства стиля родительского виджета

• color: цвет текста

• backgroundColor: цвет фона текста

• fontSize: размер шрифта

• fontWeight: толщина шрифта. Представляет класс FontWeight и может принимать в качестве значения одну из его констант: FontWeight.w100, FontWeight.w200, FontWeight.w300, FontWeight.w400 (эквивалентно FontWeight.bold), FontWeight.w500, FontWeight.w600, FontWeight.w700 (эквивалентно FontWeight.bold), FontWeight.w800 и FontWeight.w900. Чем больше числовое значение в константе, тем соответственнее толще будет шрифт.

• fontStyle: устанавливает стиль шрифта. Представляет перечисление FontStyle и может принимать следующие значения: FontStyle.normal и FontStyle.italic (шрифт курсивом)

• letterSpacing: устанавливает расстояние между словами, отрицательное значение позволяет сделать слова ближе друг к другу

• wordSpacing: устанавливает расстояние между символами, отрицательное значение позволяет сделать символы ближе друг к другу

• textBaseline: базовая линия текста

• height: коэффициент высоты текстового элемента. Для определения реальной высоты этот коэффициент умножается на высоту шрифта fontSize.

• locale: устанавливает локаль или языковую культуру текста

• foreground: задает изображение или объект Paint для закраски текста

• background: задает изображение или объект Paint в качестве фона виджета

• shadows: устанавливает тени для шрифта в виде набора объектов Shadow

• decoration: декорации текста (зачеркивание, подчеркивание или надчеркивание). Может принимать в качестве значения следующие константы из класса TextDecoration:

  • TextDecoration.lineThrough: зачеркнутый текст

  • TextDecoration.overline: подчеркивание над текстом

  • TextDecoration.underline: подчеркивание под текстом

• decorationColor: цвет декораций

• decorationStyle: стиль декораций. Представляет перечисление TextDecorationStyle и может принимать следующие его значения:

  • TextDecorationStyle.dashed: пунктирная линия

  • TextDecorationStyle.dotted: точки

  • TextDecorationStyle.double: двойное подчеркивание

  • TextDecorationStyle.solid: обычная линия

  • TextDecorationStyle.wavy: волнистая линия

• decorationThickness: толщина декораций

• fontFamily: название используемого шрифта. По умолчанию для Android используется только шрифт "Roboto".

Рассмотрим использование декораций:

import 'package:flutter/material.dart';

void main() {
  runApp(Container(
    padding: EdgeInsets.only(top:25, left:10, right:10),
    color: Colors.teal,
    child: Column(children: <Widget>[
      Text("Hello Flutter from Metanit.com",
      textDirection: TextDirection.ltr,
      style: TextStyle(
          fontSize: 26,
          decoration: TextDecoration.lineThrough,
          decorationStyle: TextDecorationStyle.double
      )),
      Text("Hello Flutter from Metanit.com",
          textDirection: TextDirection.ltr,
          style: TextStyle(
              fontSize: 26,
              decoration: TextDecoration.underline,
              decorationStyle: TextDecorationStyle.wavy,
              decorationColor: Colors.blue,
              decorationThickness: 2
          )),
      Text("Hello Flutter from Metanit.com",
          textDirection: TextDirection.ltr,
          style: TextStyle(
              fontSize: 26,
              decoration: TextDecoration.underline,
              decorationStyle: TextDecorationStyle.dotted,
              decorationColor: Colors.red,	
              decorationThickness: 3
          ))
    ])
    )
  );
}

Многострочный текст, перенос и усечение текста

Текст виджета может не помещаться к отведенное для него пространство. И в этом случае есть разные стратегии. Так, параметр overflow позволяет задать формат завершения строки текста. Он представляет перечисление TextOverflow и может принимать следующие значения:

• TextOverflow.clip: текст усекается таким образом, чтобы вместиться по длине контейнера

• TextOverflow.ellipsis: в конце вмещаемого текста добавляется многоточие

• TextOverflow.fade: конец текста плавно теряет цвет

• TextOverflow.visible: текст виден вне контейнера

Например, использование многоточия после длинного текста:

import 'package:flutter/material.dart';

void main() {
  runApp(Container(
    padding: EdgeInsets.only(top:25, left:10, right:10),
    color: Colors.white,
    child: Text("Все мы сейчас желаем кушать, потому что утомились и",
        textDirection: TextDirection.ltr,
        style: TextStyle(color: Colors.black87, fontSize: 20),
        overflow: TextOverflow.ellipsis)
    )
  );
}

Параметр softWrap позволяет перенести текст на следующую строку (при значении true). По умолчанию он равен false, то есть текст не переносится.

import 'package:flutter/material.dart';

void main() {
  runApp(Container(
    padding: EdgeInsets.only(top:25, left:10, right:10),
    color: Colors.white,
    child: Text("Все мы сейчас желаем кушать, потому что утомились и уже четвертый час, но это, душа моя Григорий Саввич, "
        "не настоящий аппетит. Настоящий, волчий аппетит, когда, кажется, отца родного съел бы, бывает только после физических движений",
        textDirection: TextDirection.ltr,
        style: TextStyle(color: Colors.black87, fontSize: 20),
        softWrap: true
    )
    )
  );
}

Еще одн стратегия заключается в том, чтобы определить количество строк в конструкторе с помощью параметра maxLines. Тест будет автоматически переноситься на следующую строку (пока не заполнит все максимальное количество строк).

import 'package:flutter/material.dart';

void main() {
  runApp(Container(
    padding: EdgeInsets.only(top:25, left:10, right:10),
    color: Colors.white,
    child: Text("Все мы сейчас желаем кушать, потому что утомились и уже четвертый час, но это, душа моя Григорий Саввич, "
        "не настоящий аппетит. Настоящий, волчий аппетит, когда, кажется, отца родного съел бы, бывает только после физических движений",
        textDirection: TextDirection.ltr,
        style: TextStyle(color: Colors.black87, fontSize: 20),
        maxLines: 4
    )
    )
  );
}