Docs
Installation

Installation

How to install dependencies and structure your app.

Flutter

Manual

Installing

Start by activating pixl

dart pub global activate pixl

Now you can run the pixl command in your terminal.

Run the CLI

Run the pixl init command to setup your project:

pixl init

Configure pixl.json

You will be asked a few questions to configure pixl.json:

Where do you like to generate your components?? › lib
Select a base color? › Slate
Define a base inset for spacing? › 8.0
Define a base border radius for card, input and buttons › 8.0
Would you like to use widgetbook?? › no / yes
Write configuration to "pixl.json". Proceed? › no / yes

The command will generate a pixl.json file in the root of your project and a styles folder based on the configuration.

pixl.json

The json file contains all the configuration and file references for pixl.

pixl.json
{
  "path": "lib",
  "widgetbook": true,
  "styles": {
    "style": "default",
    "baseInset": 8.0,
    "baseRadius": 8.0,
    "baseColor": "slate",
    "colors": {}
  },
  "refs": {
    "components": [],
    "styles": [
      "styles/ui_colors.dart",
      "styles/ui_insets.dart",
      "styles/styles.dart"
    ],
    "widgetbooks": [
      "widgetbook/widgetbook_app.dart",
      "widgetbook/widgetbook_components.dart"
    ]
  }
}

App structure

Here's how I structure my Flutter apps. You can use this as a reference:

.
├── lib
│   ├── app
│   │   ├── router.dart
│   │   └── app.dart
│   ├── components
│   │   ├── ui
│   │   │   ├── alert_dialog.dart
│   │   │   ├── button.dart
│   │   │   ├── dropdown_menu.dart
│   │   │   └── ...
│   │   ├── main_nav.dart
│   │   ├── page_header.dart
│   │   └── ...
│   ├── utils
│   │   └── utils.dart
│   ├── styles
│   │   ├── styles.dart
│   │   ├── ui_colors.dart
│   │   └── ui_insets.dart
│   ├── widgetbook (optional)
│   │   ├── widgetbook_app.dart
│   │   └── widgetbook_components.dart
├── pixl.json
└── pubspec.yaml
Introductionpixl.json