This is an illustration of a Themed GSText widget with default configuration.
import 'package:gluestack_ui/gluestack_ui.dart';
GSText(
text: 'This is an example of a simple text.',
style: GSStyle(
textStyle: TextStyle(letterSpacing: $GSLetterSpacing.$lg),
),
)
API Reference
Import
To use this widget in your project, include the following import statement in your file.
import "package:gluestack_ui/gluestack_ui.dart"
This section provides a comprehensive reference list for the widget parameters, detailing descriptions, properties, types, and default behavior for easy project integration.
GSText
It inherits all the properties of Flutter's
Text widget.
Parameters
GSText widget is created using GSText widget from flutter. It extends all the parameters supported by
Flutter Textand additionally the properties mentioned below.
GSText
Name | Value | Default |
---|
isTruncated | true | false |
bold | true | false |
underline | true | false |
strikeThrough | true | false |
sub | true | false |
italic | true | false |
highlight | true | false |
size | 2xs | xs | sm | md | lg | xl | 2xl | 3xl | 4xl | 5xl | 6xl | md |
Note: These props are exclusively applicable when utilizing the default configuration of gluestack-ui/config. If you are using a custom theme, these props may not be available.
Examples
The Examples section provides visual representations of the different variants of the widget, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
GSText Sizes
GSText widget comes in different sizes, such as xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, and 6xl allowing users to adjust the button size based on their design needs.
GSText widget also accepts some shorthands for basic quick styling.
Parameters | Type | Default | Description |
---|
bold | boolean | false | Used to make the text bold. |
isTruncated | boolean | false | If true, it will render an ellipsis when the text exceeds the width of the viewport or maxWidth set. |
italic | boolean | false | Used to make the text italic. |
underline | boolean | false | Used underline the text. |
strikeThrough | boolean | false | A horizontal line through the center of the text. |
highlight | boolean | false | Used to highlight the text with a yellow background. |