chromotome 1.0.1

Chromotome Color Palette from Kjetil Golid. A manually curated list of theme and style that please the eyes.

example/lib/main.dart

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

void main() {
  runApp(SafeArea(child: ChromotomeApp()));
}

class ChromotomeApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) => MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Chromotome',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: Scaffold(body: ChromotomePage()),
      );
}

class ChromotomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => PageView(
      children: Chromotomes.entries
          .map((style) => Column(
                children: <Widget>[
                  Container(
                    margin: EdgeInsets.symmetric(vertical: 30),
                    child: Text(style.key,
                        style: TextStyle(
                            fontWeight: FontWeight.bold, fontSize: 50)),
                  ),
                  Expanded(child: ChromotomeList(style: style.key)),
                ],
              ))
          .toList());

  const ChromotomePage();
}

class ChromotomeList extends StatelessWidget {
  final String style;

  ChromotomeList({Key key, this.style}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final chromes = chromotomes(style);

    return ListView.builder(
        itemCount: chromes.length,
        itemBuilder: (ctx, idx) {
          final palette = chromes.entries.toList()[idx].value;
          return PaletteDetails(palette: palette);
        });
  }
}

String capitalize(String s) {
  return "${s[0].toUpperCase()}${s.substring(1)}";
}

class PaletteDetails extends StatelessWidget {
  const PaletteDetails({
    Key key,
    @required this.palette,
  }) : super(key: key);

  final Palette palette;

  @override
  Widget build(BuildContext context) {
    final title = palette.name.split('_').map((e) => capitalize(e)).join(' ');

    return Container(
      margin: EdgeInsets.only(left: 8, right: 8, bottom: 24),
      decoration: BoxDecoration(
          color: palette.background,
          border: Border.all(width: 16, color: palette.stroke)),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(16),
            child: Text(
              title,
              style: TextStyle(
                  fontSize: 35,
                  fontWeight: FontWeight.bold,
                  color: palette.stroke),
            ),
          ),
          Container(
            height: 100,
            child: Row(
              children: palette.colors
                  .map((e) => Expanded(flex: 1, child: Container(color: e)))
                  .toList(),
            ),
          )
        ],
      ),
    );
  }
}