Flutter UI #91: Fun with Liquid Button in Flutter


Fun with Liquid Button in Flutter
Flutter UI #91: Fun with Liquid Button in Flutter


liquid_button: ^1.0.0

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

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

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

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                RoundClothButton(
                  expandFactor: 20,
                  backgroundColor: Colors.red,
                  gradientColor: Colors.blue,
                  retainGradient: true,
                  height: 100,
                  width: 400,
                  child: const Text(
                    "Round Cloth Button",
                    style: TextStyle(
                        fontSize: 30,
                        color: Colors.white,
                        fontWeight: FontWeight.bold),
                  ),
                ),
                ClothButton(
                  expandFactor: 10,
                  backgroundColor: Colors.black,
                  height: 100,
                  gradientColor: Colors.yellow,
                  child: const Text(
                    "Cloth Button",
                    style: TextStyle(
                        fontSize: 30,
                        color: Colors.white,
                        fontWeight: FontWeight.bold),
                  ),
                  width: 400,
                ),
                LiquidButton(
                  expandFactor: 20,
                  backgroundColor: Colors.black87,
                  height: 100,
                  child: const Text(
                    "Liquid Button",
                    style: TextStyle(
                        fontSize: 30,
                        color: Colors.pink,
                        fontWeight: FontWeight.bold),
                  ),
                  gradientColor: Colors.teal,
                  width: 400,
                ),
              ],
            )),
      ),
    );
  }
}

#fluttertutorial #fluttertutorialforbeginners #flutterkicks #flutterfullcourse #flutterapp #flutterproject #fluttercourse #flutterappdevelopment #flutteranimation #flutterapi #flutterapptutorial #flutterapiintegration #flutterappproject #flutterbloc #flutterbasics #flutterbloctutorial #flutterbeginnertutorial #flutterbackend #flutterblocpattern #flutterbackgroundservice #fluttercrashcourse #fluttercompletetutorial #cookieswirlcfluttershydoll #flutterdevelopment #flutterdesktop #flutterdownload #flutterdesign #flutterdesktopapp #flutterdart #flutterd #flutterecommerceapp #flutterexplained

3 views0 comments