pixl

Docs

Manual Installation

Add dependencies to your project manually.

Add dependencies

Components are built using pixl_primitives. You need to install the dependency in your project

Follow the installation instructions to get started.

dart pub add pixl_primitives

Add icon library

If you're using the default style, install lucide-react:

dart pub add lucide-react

Configure styles

Create a styles folder in the lib directory of your project and add the following files. Add the following files to your project

lib/styles/styles.dart

library ui_styles;
 
export './ui_insets.dart';
export './ui_colors.dart';

lib/styles/ui_colors.dart

import 'package:flutter/material.dart';
import 'package:pixl_primitives/tailwind_color.dart';
 
class UIColors {
  // Tailwind colors
  static TailwindColor tw = TailwindColor();
 
  // Custom colors
  ...
 
}

lib/styles/ui_insets.dart

import 'package:flutter/material.dart';
import 'package:pixl_primitives/inset.dart';
 
final _baseInset = BaseInset.init(8.0);
 
class UIInsets {
  /// [baseInset] divided by 4
  ///
  /// 8.0 / 4 = 2.0
  static double xs = _baseInset.insetXs();
 
  /// [baseInset] divided by 2
  ///
  /// 8.0 / 2 = 4.0
  static double sm = _baseInset.insetSm();
 
  /// [baseInset]
  ///
  /// baseInset = 8.0
  static double x1 = _baseInset;
 
  /// [baseInset] multiplied by 2
  ///
  /// 8.0 x 2 = 16.0
  static double x2 = _baseInset.insetTimes(2);
 
  /// [baseInset] multiplied by 3
  ///
  /// 8.0 x 3 = 24.0
  static double x3 = _baseInset.insetTimes(3);
 
  /// [baseInset] multiplied by 4
  ///
  /// 8.0 x 4 = 32.0
  static double x4 = _baseInset.insetTimes(4);
 
  /// [baseInset] multiplied by 5
  ///
  /// 8.0 x 5 = 40.0
  static double x5 = _baseInset.insetTimes(5);
 
  /// [baseInset] multiplied by 6
  ///
  /// 8.0 x 6 = 48.0
  static double x6 = _baseInset.insetTimes(6);
 
  /// [baseInset] multiplied by 7
  ///
  /// 8.0 x 7 = 56.0
  static double x7 = _baseInset.insetTimes(7);
 
  /// [baseInset] multiplied by 8
  ///
  /// 8.0 x 8 = 64.0
  static double x8 = _baseInset.insetTimes(8);
 
  /// [baseInset] multiplied by 9
  ///
  /// 8.0 x 9 = 72.0
  static double x9 = _baseInset.insetTimes(9);
 
  /// [baseInset] multiplied by 10
  ///
  /// 8.0 x 10 = 80.0
  static double x10 = _baseInset.insetTimes(10);
 
  /// [baseInset] multiplied by 11
  ///
  /// 8.0 x 11 = 88.0
  static double x11 = _baseInset.insetTimes(11);
 
  /// [baseInset] multiplied by 12
  ///
  /// 8.0 x 12 = 96.0
  static double x12 = _baseInset.insetTimes(12);
}
 
class UISpace {
  static Widget h([double? height]) => SizedBox(
        height: height ?? UIInsets.x1,
      );
  static Widget w([double? width]) => SizedBox(
        width: width ?? UIInsets.x1,
      );
}
 
EdgeInsets eTop(double inset) => EdgeInsets.only(top: inset);
EdgeInsets eBottom(double inset) => EdgeInsets.only(bottom: inset);
EdgeInsets eLeft(double inset) => EdgeInsets.only(left: inset);
EdgeInsets eRight(double inset) => EdgeInsets.only(right: inset);
EdgeInsets eHorizontal(double inset) => EdgeInsets.symmetric(horizontal: inset);
EdgeInsets eVertical(double inset) => EdgeInsets.symmetric(vertical: inset);
EdgeInsets eAll(double inset) => EdgeInsets.all(inset);
EdgeInsets eTopAndHorizontal(double inset) => EdgeInsets.only(
      left: inset,
      right: inset,
      top: inset,
    );

Add a Widgetbook (optional)

Install the widgetbook package to create a widgetbook for your project.

Follow the installation instructions to get started.

dart pub add widgetbook widgetbook_annotation

dart pub add widgetbook_generator  build_runner --dev

Create a widgetbook folder in the lib directory of your project and add the following files.

lib/lib/widgetbook/widgetbook_app.dart

import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
 
import 'widgetbook_app.directories.g.dart';
 
void main() {
  runApp(const lib/WidgetbookApp());
}
 
@widgetbook.App()
class WidgetbookApp extends StatelessWidget {
  const WidgetbookApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Widgetbook.material(
      // Use the generated directories variable
      directories: directories,
      addons: [],
    );
  }
}

lib/lib/widgetbook/widgetbook_components.dart

import 'package:flutter/material.dart';
 
class WBPage extends StatelessWidget {
  final String title;
  final String? desc;
  final List<Widget> children;
 
  const WBPalib/ge({
    super.key,
    required this.title,
    this.desc,
    required this.children,
  });
 
  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.white,
        child: ListView(
          padding: const EdgeInsets.all(42),
          children: [
            getTitle,
            if (desc != null) ...[
              const SizedBox(height: 8),
              getDesc,
            ],
            const SizedBox(height: 40),
            ...children,
          ],
        ));
  }
 
  Widget get getTitle => Text(
        title,
        style: const TextStyle(fontSize: 28, fontWeight: FontWeight.w600),
      );
 
  Widget get getDesc => Text(
        desc!,
        style: TextStyle(
          color: Colors.grey.shade600,
          fontSize: 18,
          fontWeight: FontWeight.w300,
        ),
      );
}
 
class WBCase extends StatelessWidget {
  final String? title;
  final Widget child;
  final double maxWidth;
 
  const WBCase(
      {super.key,
      this.title,
      required this.child,
      this.maxWidth = double.infinity});
 
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        if (title != null) ...[
          Text(
            title ?? "",
            style: const TextStyle(fontSize: 20, fontWeight: FontWeight.w500),
          ),
          const SizedBox(height: 20),
        ],
        Container(
          width: double.infinity,
          padding: const EdgeInsets.all(40),
          decoration: BoxDecoration(
            border: Border.all(color: Colors.grey.shade300),
            borderRadius: const BorderRadius.all(Radius.circular(8)),
          ),
          child: Center(
            child: Container(
              constraints: BoxConstraints(maxWidth: maxWidth),
              child: child,
            ),
          ),
        ),
        const SizedBox(height: 32),
      ],
    );
  }
}

Run the following command to generate the widgetbook directories file.

dart run build_runner build

Run the widgetbook app.

flutter run -d macos -t lib/widgetbook/widgetbook_app.dart

That's it

You can now start adding components to your project.