Flutter UI #54: Fun with Gradient Text in Flutter


Flutter UI #54: Fun with Gradient Text in Flutter

Tutorial and code of Gradient Text in Flutter. Copy and paste the below code as per your requirements.

gradient_text: ^1.0.2

import 'package:flutter/material.dart';
import 'package:gradient_text/gradient_text.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.pink,
      ),
      home: const MyHomePage(title: 'Gradient Text'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Gradient gradient = const LinearGradient(
      colors: [Colors.deepPurple, Colors.deepOrange, Colors.pink]);
  bool shadow = false;
  bool small = false;
  bool bold = false;

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      backgroundColor: Colors.grey.shade100,
      appBar: AppBar(
        title: Center(child: Text(widget.title)),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Card(
                  elevation: 3,
                  child: Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: GradientText(
                      'Linear Gradient',
                      gradient: gradient,
                      style: TextStyle(
                          fontSize: (small) ? 14 : 42,
                          shadows: (shadow) ? [const Shadow(color: Colors.black26, offset: Offset(0, 3), blurRadius: 3)] : null,
                          fontWeight: (bold) ? FontWeight.bold : FontWeight.normal
                      ),
                    ),
                  )),

              CheckboxListTile(title: const Text("Shadow"), value: shadow, onChanged: (isOn) {
                debugPrint("OnChanged");
                setState(() {
                  shadow = isOn!;
                });
              }),
              CheckboxListTile(title: const Text("Bold"), value: bold, onChanged: (isOn) {
                debugPrint("OnChanged");
                setState(() {
                  bold = isOn!;
                });
              }),
              CheckboxListTile(title: const Text("Small"), value: small, onChanged: (isOn) {
                debugPrint("OnChanged");
                setState(() {
                  small = isOn!;
                });
              }),
              Wrap(
                spacing: 10,
                alignment: WrapAlignment.center,
                children: <Widget>[
                  RaisedButton(child: const Text("Linear Gradient", style: TextStyle(color: Colors.white)), color: Colors.purple, onPressed: (){
                    setState(() {
                      gradient = const LinearGradient(
                          colors: [Colors.deepPurple, Colors.deepOrange, Colors.pink]);
                    });
                  },),
                  RaisedButton(child: const Text("Radial Gradient", style: TextStyle(color: Colors.white)), color: Colors.pink, onPressed: (){
                    setState(() {
                      gradient = const RadialGradient(
                          colors: [Colors.deepPurple, Colors.deepOrange, Colors.pink]);
                    });
                  },),
                  RaisedButton(child: const Text("Sweep Gradient", style: TextStyle(color: Colors.white)), color: Colors.deepOrange, onPressed: (){
                    setState(() {
                      gradient = const SweepGradient(
                          colors: [Colors.deepPurple, Colors.deepOrange, Colors.pink]);
                    });
                  },)
                ],)
            ],
          ),
        ),
      ),
    );
  }
}

Leave a Reply

Your email address will not be published.