tailwind_colors 0.3.1 copy "tailwind_colors: ^0.3.1" to clipboard
tailwind_colors: ^0.3.1 copied to clipboard

Easily use the TailwindCSS color palette in dart. Features both the first TailwindCSS, the TailwindCSS 2.0 and the TailwindUI color palettes.

example/lib/main.dart

import 'dart:math';

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

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

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

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

class _MyAppState extends State<MyApp> {
  MaterialColor currentSwatch = Colors.blue;
  Random rand = Random();
  List<TWColor> availableColors = [
    TWTwoColors.amber,
    TWTwoColors.blue,
    TWTwoColors.red,
    TWUIColors.yellow,
    TWUIColors.indigo,
    TWUIColors.orange,
  ];

  void setNewSwatch() {
    print("Changing theme");
    setState(() {
      currentSwatch = availableColors
          .elementAt(rand.nextInt(availableColors.length))
          .asMaterialColor;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: currentSwatch,
      ),
      home: MyHomePage(
          title: 'Flutter Demo Home Page', onPress: () => setNewSwatch()),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Stack(
        children: [
          Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'You have pushed the button this many times:',
                  style: TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.headline4,
                ),
              ],
            ),
          ),
          Positioned(
            left: 20,
            bottom: 20,
            child: ElevatedButton(
              onPressed: () {
                widget.onPress();
              },
              child: Text("Change Theme"),
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}
16
likes
150
points
556
downloads

Publisher

unverified uploader

Weekly Downloads

Easily use the TailwindCSS color palette in dart. Features both the first TailwindCSS, the TailwindCSS 2.0 and the TailwindUI color palettes.

Repository (GitHub)

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on tailwind_colors