Flutter - Text widget

Flutter 的 Text widget 可以用來做簡易的文字顯示。

其建構子如下：

Text(String data, { Key key, TextStyle style, TextAlign textAlign, TextDirection textDirection, bool softWrap, TextOverflow overflow, double textScaleFactor, int maxLines })

屬性如下：

NameTypeDescription
dataStringThe text to display.
maxLinesintAn optional maximum number of lines for the text to span, wrapping if necessary. If the text exceeds the given number of lines, it will be truncated according to overflow.
overflowTextOverflowHow visual overflow should be handled.
softWrapboolWhether the text should break at soft line breaks.
styleTextStyleIf non-null, the style to use for this text.
textAlignTextAlignHow the text should be aligned horizontally.
textDirectionTextDirectionThe directionality of the text.
textScaleFactordoubleThe number of font pixels for each logical pixel.
hashCodeintThe hash code for this object.
keyKeyControls how one widget replaces another widget in the tree.
runtimeTypeTypeA representation of the runtime type of the object.

方法如下：

NameReturn TypeDescription
build(BuildContext context)WidgetDescribes the part of the user interface represented by this widget.
debugFillProperties(DiagnosticPropertiesBuilder description)void
createElement()StatelessElementCreates a StatelessElement to manage this widget’s location in the tree.
debugDescribeChildren()ListReturns a list of DiagnosticsNode objects describing this node’s children.
noSuchMethod(Invocation invocation)dynamicInvoked when a non-existent method or property is accessed.
toDiagnosticsNode({String name, DiagnosticsTreeStyle style })DiagnosticsNodeReturns a debug representation of the object that is used by debugging tools and by toStringDeep.
toString({DiagnosticLevel minLevel: DiagnosticLevel.debug })StringReturns a string representation of this object.
toStringDeep({String prefixLineOne: ‘’, String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug })StringReturns a string representation of this node and its descendants.
toStringShallow({String joiner: ‘, ‘, DiagnosticLevel minLevel: DiagnosticLevel.debug })StringReturns a one-line detailed description of the object.
toStringShort()StringA short, textual description of this widget.

使用時如果沒什麼特殊的需求，那麼只要在建置 Text widget 時透過建構子帶入要顯示的文字即可。

如果要控制文字的排列，可以設定 textAlign，若要設定文字顯示的比例，可以設定 textScaleFactor。

import 'package:flutter/material.dart';
void main() {
  runApp(
    new Text(
      'Hello, world!',
      textDirection: TextDirection.ltr,
      textAlign: TextAlign.center,
      textScaleFactor: 2.0,
    )
  );
}

1.png

2.png

如果要對文字的樣式做調整，可以設定 style，像是設定字型的話可以設定 Style 的 fontFamily。

import 'package:flutter/material.dart';
void main() {
  runApp(
    new Text(
      'Hello, world!',
      textDirection: TextDirection.ltr,
      textAlign: TextAlign.center,
      style: new TextStyle(fontFamily: 'Raleway')
    )
  );
}

3.png

4.png

要設定文字為粗體的話，可以設定 Style 的 fontWeight 為 FontWeight.bold。

import 'package:flutter/material.dart';
void main() {
  runApp(
    new Text(
      'Hello, world!',
      textDirection: TextDirection.ltr,
      textAlign: TextAlign.center,
      style: new TextStyle(fontWeight: FontWeight.bold)
    )
  );
}

5.png

6.png

要設定文字顏色的話，可設定 Style 的 color。

import 'package:flutter/material.dart';
void main() {
  runApp(
    new Text(
      'Hello, world!',
      textDirection: TextDirection.ltr,
      textAlign: TextAlign.center,
      style: new TextStyle(color: Colors.yellow)
    )
  );
}

7.png

8.png

要設定文字底線的話，可以設定 Style 的 decoration，並用 decorationColor 設定其顏色，用 decorationStyle 設定樣式。

import 'package:flutter/material.dart';
void main() {
  runApp(
    new Text(
      'Hello, world!',
      textDirection: TextDirection.ltr,
      textAlign: TextAlign.center,
      style: new TextStyle(
        decoration: TextDecoration.underline,
        decorationColor: Colors.red,
        decorationStyle: TextDecorationStyle.wavy)
    )
  );
}

9.png

10.png