Flutter Widget to display gradient text

Related tags

Templates dart text gradient flutter flutter-plugin
Overview

GradientText

A Flutter Widget for displaying gradient text, text with a gradient drawn through it.

GradientTextScreenshot

Getting Started

Add the plugin (pub coming soon):

dependencies:
  ...
  gradient_text: ^1.0.2

Usage

Import it:

import 'package:gradient_text/gradient_text.dart';

Use it:

GradientText("this is my text",
    gradient: LinearGradient(
    colors: [Colors.deepPurple, Colors.deepOrange, Colors.pink]),
    style: TextStyle(fontSize: 42),
    textAlign: TextAlign.center);

Parameters:

data :: (required) :: The String to be used in the Text Widget

gradient :: (required) :: A gradient to be drawn through the text

style :: (optional) :: TextStyle to be used in the Text Widget. Color is ignored, as the text must be white to have the gradient drawn.

textAlign :: (optional) :: TextAlign to be used in the Text Widget. Default is left.

Credit

The idea to use ShaderMask came from Reddit user boformer. Thanks boformer.

You might also like...

Flutter plugin to display a popup menu button widget with handsome design and easy to use.

Flutter plugin to display a popup menu button widget with handsome design and easy to use.

menu_button Flutter widget to display a popup menu button very simply and easily customizable. Resources Documentation Pub Package GitHub Repository I

Sep 27, 2022

Flutter plugin to display a simple steps indicator line widget

Flutter plugin to display a simple steps indicator line widget

steps_indicator A simple steps indicator widget Installation Add steps_indicator: ^1.3.0 in your pubspec.yaml dependencies. And import it: import 'pac

Oct 18, 2022

🧾 Flutter widget allowing easy cache-based data display in a ListView featuring pull-to-refresh and error banners.

Often, apps just display data fetched from some server. This package introduces the concept of fetchable streams. They are just like normal Streams, b

Jan 18, 2022

Segment display widget for Flutter

Segment display widget for Flutter

Segment display widget Segment display widget for Flutter. Supports multiple types of segment displays and segment customization. Contents Features In

Jan 7, 2022

Clock loader - Highly versatile Widget display the smooth and creative loader named as clock loader

Clock loader - Highly versatile Widget display the smooth and creative loader named as clock loader

Clock Loader Highly versatile Widget display the smooth and creative loader name

Dec 30, 2022

Animated shimmer - A simple & lightweight widget to display an animated shimmer effect

Animated shimmer - A simple & lightweight widget to display an animated shimmer effect

Animated Shimmer Supports Null Safety A simple & lightweight widget to display a

Apr 27, 2022

Flutter circular text widget

Flutter circular text widget

Circular Text Widget Installation Add dependency in pubspec.yaml: dependencies: flutter_circular_text: "^0.3.1" Import in your project: import 'pack

Dec 28, 2022

Easy to use text widget for Flutter apps, which converts inlined urls into working, clickable links

Easy to use text widget for Flutter apps, which converts inlined urls into working, clickable links

LinkText Easy to use text widget for Flutter apps, which converts inlined URLs into clickable links. Allows custom styling. Usage LinkText widget does

Nov 4, 2022

A Flutter widget to dynamically add links to your text.

A Flutter widget to dynamically add links to your text.

linkable A Flutter widget to add links to your text. By default, the Text or RichText widgets render the URLs in them as simple text which are not cli

Dec 15, 2021
Comments
  • java uses or overrides a deprecated API.

    java uses or overrides a deprecated API.

    This is the error message- java uses or overrides a deprecated API. Note: Recompile with -Xlint:deprecation for details. Note: Some input files use or override a deprecated API. Note: Recompile with -Xlint:deprecation for details.

    I'm using flutter 1.22.6 and dart 2.10.5 when i add this package in my pubspec and build . This error occurs and as a result text written in gradient_test is not visible

    opened by gaurav1903 0
  • Flutter web error

    Flutter web error

    GradientText( "Demo Text", style: new TextStyle( fontSize: width * 0.18, fontWeight: FontWeight.bold, fontFamily: 'Piedra', letterSpacing: 5.0, ), gradient: LinearGradient( colors: [ Colors.deepPurple, Colors.deepOrange, Colors.pink, ], ), ),

    when I use this code I am getting an error running on flutter web

    ` The following UnimplementedError was thrown during a scheduler callback: UnimplementedError

    When the exception was thrown, this was the stack throw_ (dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart:212:49)) pushShaderMask (lib/_engine/engine/html/scene_builder.dart:231:5)) addToScene (packages/flutter/src/rendering/layer.dart:1814:26)) [_addToSceneWithRetainedRendering] (packages/flutter/src/rendering/layer.dart:442:5)) addChildrenToScene (packages/flutter/src/rendering/layer.dart:1029:14))

    `

    opened by JAYDARANIYA 0
  • Problem with

    Problem with "Dancing Script" font

    Works very well with kind of standard fonts, but I tried to use it with a font I found on Google Fonts called "Dancing Script" and I found out that there's a little piece of the last letter of the text that doesn't change colour, it remains white. I've also tried changing last letter, size of the text and colours of the gradient but nothing happens.

    Screenshot_20200913-133801

    opened by AleSajo 0
Owner
Tony Owen
Tony Owen
GitHub
Text analyzer that extracts tokens from text for use in full-text search queries and indexes.

Tokenize text, compute document readbility and compare terms in Natural Language Processing. THIS PACKAGE IS PRE-RELEASE, and SUBJECT TO DAILY BREAKIN

GM Consult Pty Ltd 5 Dec 12, 2022
Flutter component Gradient Progress Indicator

Gradient Progress Indicator Introduction This package shows a circular progress indicator with gradient colors, and it is possible insert texts inside

Otoniel Moreira Duarte 2 Dec 5, 2022
Awesome aurora gradient - Awesome Aurora Gradients for flutter

Awesome Aurora Gradient Provides a simple but powerful gradient extension method

null 2 Feb 25, 2022
Flutter ticket pass - A Flutter Widget to display the details of a ticket/pass purchased by customers and display the details of the purchase

ticket_pass_package A Flutter package to display the purchase of a ticket/pass along with additional details such as list of buyers. The source code i

null 40 Aug 13, 2022
This library provides a customizable Flutter widget that makes it easy to display text in the middle of a Divider.

1. About 1.1. Introduction 1.1.1. Install Library 1.1.2. Import It 1.1.3. Use TextDivider 1.2. Details 1.2.1. Customization Options 1.2.2. Horizontal

Kato Shinya 2 Feb 9, 2022
Display images flutter - Simple app to display images in flutter

Display Images In Flutter Simple app to display images in a flutter. In this dem

Manish Ahire 1 Jan 29, 2022
An Instagram like text editor Flutter widget that helps you to change your text style.

TextEditor An instagram like text editor widget for flutter Show some ❤️ and star the repo to support the project Features Edit TextStyle object font

Mehdi Zarepour 68 Dec 16, 2022
Grad text package - A Flutter Widget to draw gradients into text

grad_text A Flutter Widget to draw gradients into text.(Null safe) Demo Install

Karthik Sunil K 3 Jan 31, 2022
Detectable text field - Flutter Text widgets with detection features

detectable_text_field Text widgets with detection features. You can detect hasht

null 0 Feb 2, 2022
A text field that displays text on different languages based on your selection.

translatable_text_field A text field that displays text on different languages based on your selection. Its basic idea is that you place this fields i

null 0 Mar 13, 2022