An expressive way to effortlessly build design systems in Flutter.

Overview

mix

An expressive way to effortlessly build design systems in Flutter. Mix offers primitive building blocks to help developers and designers create beautiful and consistent UI.

Important

Mix is currently being used internally to build design systems in Flutter.
However, it is still in the experimental development stages.
Major APIs are expected to change until the 1.0 release.

Motivation & Goals

  • Creating consistent custom (non-material) UI in Flutter is difficult
  • Maintaining a design system is much harder than building it.
  • Visual attributes should be defined outside of a widget by a composable API shared across the design system.
  • Style consistently with a global theme
  • Respond to changing requirements quickly
  • Create adaptive layouts with ease
  • Material Theme compatible

Principles

  • Development efficiency is gained by the ease of use, consistency, and reusability, not coding speed.
  • Abstract Flutter API, and not modify its behavior.
  • Composability should be a priority. Mixes, Attributes, Widgets, etc.
  • Designer friendly (use simple standard semantics when possible)

Examples

Simple Mix

final squareMix = Mix(h(150), w(150));

Box(
    squareMix,
    child: Text('Square'),
);

// You can also use the following:
// This way has some downsides. More info soon...
squareMix.box(child:Text('Square'));

Composability

Extend Mixes

final cardMix = squareMix.mix(p(20), rounded(20), bgColor(Colors.white));

Override Mixes

final redCardMix = cardMix.mix(bgColor(Colors.red));

Combine Mixes

final elevationMix = Mix(
    shadowColor(Colors.black12),
    shadowBlur(4),
    shadowOffset(0, 2),
);

Box(
    Mix.combine(cardMix, elevationMix),
    child: Text('Card With Shadow'),
);

Conditional Mixes

// If you wan't to change the Mix depending on a condition
final conditonalMix = Mix.chooser(isSelected, dynamicMix, redCardMix);

Dynamic Mixes

If you want the card to change color when in dark mode you can use a dynamic attribute.

final dynamicMix = cardMix.mix(dark(bgColor(Colors.black)));

/// Now, when the app is on dark mode the card color will change to `black`.
Box(
    dynamicMix,
    child: Text('Dynamic Card'),
);

You can also leverage media query context values

final flexMix = Mix(gap(20), mainAxis.center);

// Adaptive gutter for your flex widgets using media query
final adaptiveFlexMix = flexMix.mix(
  mq.xs(gap(10)),
  mq.sm(gap(15)),
  mq.lg(gap(40)),
);

APIs

Documentation is currently in progress. For now you can find some of the available utilities here

Concepts

Here are some high-level concepts to understand how Mix works and to allow for you to get started.

Attributes

These are the features or characteristics of certain widgets. Most attributes map out to layout, visual widgets, or widget styling itself. Attributes are primitives which get translated into their Flutter API.

Dynamic Attributes

Attributes can be dynamic, which means they only are applied in case a condition is met. This allows for the creation of Atributes that can be used depending on the widget's BuildContext.

Utilities

These are classes whose primary purpose is providing a better API for Attributes.

Not required for building Mixes; however, make a cleaner API possible and overall better development experience.

Mixes

Combination or mix of Attributes. Mixes are passed to Widgets and translated into the widget's properties.

Mixes can be reused across multiple widgets and also combine, extended, and overridden.

Mixer Widgets

These are the building block for your design system. You can easily build new widgets that take advantage of Mixes; however, there are some primitives provided.

Box

Similar to a Container with some slight adjustments for a better development experience.

Flexbox

The equivalent of the Flex widgets (Flex, Row, Column). Allow for the use of flex Attributes, and wrap them in a Box to use box attributes for composability.

ColumnBox

The equivalent of the Column widget. Allows you to use Mix attributes to style and build custom text widgets. It is an abstraction of Flexbox, so it will also accept Box attributes.

RowBox

The equivalent of the Row widget. Allows you to use Mix attributes to style and build custom text widgets. It is an abstraction of Flexbox, so it will also accept Box attributes.

TextMix

The equivalent of the Text widget. Allows you to use Mix attributes to style and build custom text widgets.

IconMix

The equivlent to the Icon widget. Allows to use Mix attributes to style and build custom icon widgets.

License

This project is licensed under the MIT License - see the LICENSE file for details

Issues
  • Feature: Animations

    Feature: Animations

    Provide apis for animations. Something like:

    AnimatedMix(Mix(
      bgColor(Colors.green),
    ))
    

    Whenever the Mix is changed, it should be animated.

    opened by bdlukaa 6
  • Widget: Pressable Component

    Widget: Pressable Component

    There is a need to create components that can be interacted with but easily styled. Right now this is not a problem as you can style all the components and wrap them in an InkWell or a GestureDetector, however, the creation of a Pressable component opens up some other possibilities.

    • Ability to provide styling for interactions, tap, hover, disabled etc.
    • Clean syntax for creating buttons and other pressable components using Mix
    enhancement widget 
    opened by leoafarias 4
  • Initial doc changes

    Initial doc changes

    I've worked over primarily the 'Concepts' page, for starters. Also changed some of the header styling to something I think works better.

    Might have gotten carried away.

    Look it over and we can discuss.

    Do you have a git Project set up for this?

    thanx, rickb

    opened by rickbsgu 3
  • Add macro comment for MixScope

    Add macro comment for MixScope

    I have added the macro comment tag to the constructor of MixScope so that the documentation shows up in the IDE.

    Have also updated the Example under that to the following:

    MixScope<MixStyles>(
      data: MixStyles(),
      child: MixDescendantWidget(),
    )
    

    Is MixDescendantWidget() alright as the child or should I change it to MyApp(). Let me know how you want to keep the example.

    opened by sbis04 2
  • MixWidget

    MixWidget

    Feature request

    MixWidget would be an extendable Widget that would provide the combination of defaultMix and mix to the build method

    class CheckboxX extends MixWidget {
      const CheckboxX({
        Key? key,
        required this.checked,
        required this.onChanged,
        Mix? mix, 
      }) : super(mix: mix, child: null);
      
      final bool checked;
      final VoidCallback onChanged;
    
      @override
      Mix get defaultMix => ...;
      
      @override
      Widget build(BuildContext context, Mix mix) {
        return ...;
      }
    }
    

    I would love to hear your thoughts on this

    opened by bdlukaa 2
  • Linting and clean-up

    Linting and clean-up

    null

    opened by leoafarias 1
  • Documentation

    Documentation

    null

    opened by leoafarias 1
  • Use RemixableWidget with CardX

    Use RemixableWidget with CardX

    CardX is now a RemixableWidget

    opened by bdlukaa 1
  • Headless chip

    Headless chip

    ChipX(
      children: const [IconMix(icon: Icons.add), TextMix('Lorem')],
      onPressed: () => debugPrint('lorem'),
    ),
    
    opened by bdlukaa 1
  • Improve docs and clean api

    Improve docs and clean api

    null

    opened by leoafarias 1
  • Documentation:

    Documentation: "simple" vs. "non-simple" Attributes

    If I'm reading this correctly, Variants, Decorators, Design Tokens, and Directives are 'non-simple' (or 'active' or 'functional' or 'behavioral') attributes.

    Whereas the 'simple' attributes add or set basic styling properties (maybe they should be called 'styling' attributes?) to the underlying widget, these go beyond simple styling properties and add behaviors.

    Seems like this distinction should be called out in the docs, somewhere, perhaps its own section after Mixing, with a descriptive page and the various types as sub-pages.

    Distinguishing Type - Naming Convention

    Another consideration is that maybe they should follow some kind of naming convention to indicate their type. Something like:

    • v-Name for Variant
    • 't-Name' for design Token
    • d-Name for Directive
    • c-Name for deCorator

    Also brings up the question as to how they are presented to the mixable widget. Clumping them together with all the other attributes in the Mix is somewhat confusing (even though, yes, they are Attributes.)

    Enforcing their placement in the named parameter of their type might be less confusing. (Less so if there's a naming convention?)

    Todo

    • [ ] Discuss

    Outcome

    • [ ] Section explaining the two distinctions.

    • [ ] Simple Attributes Subpage

    • [ ] Directives Subpage

    • [ ] Design Tokens Subpage

    • [ ] Decorators Subpage

    • [ ] Variants Subpage

    These would be distinguished somehow in the API docs, as well.

    opened by rickbsgu 0
  • Documentation:

    Documentation: "Mixing" Page

    To see my fork version, clone this: https://github.com/rickbsgu/mix and 'yarn dev' the website project.

    This page: http://localhost:3000/docs/getting-started/mixing

    Items

    • Extend an Existing Mix

      • [ ] Add overview statement that you can extend a mix, why you would want to, what it means ...
    • .apply()

      • [ ] More description. What does it do? How is it different from .combine() (other than it only takes one argument?).
    • .applyMaybe()

      • [ ] More description - design philosophy, difference between this and 'apply()'?
      • [ ] Add example that shows the distinction
    • .combine()

      • [ ] instance function
      • [ ] Example correct?
    • .combineAll()

      • [ ] instance function
      • [ ] Example correct?
    • .chooser()

      • [ ] New content

    Notes

    • I've changed the 'List' examples to actually create a list variable and pass that in. It makes it more clear that you're passing in a list. The other form, it's easy to miss (I could miss...) the braces.
    opened by rickbsgu 0
  • Use in decorating existing widgets?

    Use in decorating existing widgets?

    Can (or will) I be able to style something like a TextField using Mix? Can I access design tokens outside of a BuildContext, or within the BuildContext of a standard widget?

    opened by oravecz 0
  • Feature: Widget Builder

    Feature: Widget Builder

    Mix currently allows for the creation of functional widgets. However for usability and performance reasons it would be great to have a widget to be built automatically from a Mix.

    The API could look something like this.

    final _base = Mix(titleCase, textColor(Colors.black),dark(textColor(colors.white)));
    
    @MixTextWidget
    final h1 = Mix(apply(_base),fontSize(48));
    
    @ MixTextWidget
    final h2 = Mix(apply(_base),fontSize(36));
    

    This would generate the following output. Where WidgetMixes would be a reference to a global reference of the mixes.

    
    class H1 extends StatelessWidget {
      const H1(this.text, {Key? key}) : super(key: key);
    
      final String text;
    
      @override
      Widget build(BuildContext context) {
        return TextMix(WidgetMixes, text: text);
      }
    }
    
    

    For the decorator we can have multiple for each particular widget. Box, Flexbox, TextMix, IconMix, or we can pass the widget type as a parameter @MixWidget

    @MixWidget(type: MixWidgetType.text, name: 'Heading1');
    final h1 = Mix(apply(_base),fontSize(48));
    
    opened by leoafarias 0
Owner
Leo Farias
Leo Farias
The FlexGrid control provides a powerful and quickly way to display data in a tabular format. It is including that frozened column/row,loading more, high performance and better experience in TabBarView/PageView.

flex_grid Language: English| 中文简体 The FlexGrid control provides a powerful and quickly way to display data in a tabular format. It is including that f

FlutterCandies 32 Jan 6, 2022
This is a mobile application that goals to build a quiz about programming subjects writter with Flutter.

❓ DevQuiz A mobile application being built with NLW5 (an event from Rockeatseat - https://app.rocketseat.com.br/). This application goals to build a q

Samilly Nunes 16 Sep 15, 2021
Build a generative, customized admin for all platforms. Nice to use and nice to extend.

flutter admin kit Build a generative, customized admin for all platforms. Nice to use and nice to extend. Feature highlights: Declarative routing via

smartnuance 17 Dec 18, 2021
Flutter Music Player - First Open Source Flutter based material design music player with audio plugin to play local music files.

Flutter Music Player First Open Source Flutter based Beautiful Material Design Music Player(Online Radio will be added soon.) Demo App Play Store BETA

Pawan Kumar 1.3k Jan 16, 2022
The 'Reply' Material Design case study built with Flutter.

Reply ❤️ Flutter Reply is an email app that uses Material Design components and Material Theming to create an on-brand communication experience. This

Frederik Schweiger 542 Jan 8, 2022
Nimbus is a beautiful portfolio design built using flutter

nimbus This is Nimbus (Portfolio & CV), a beautifully designed portfolio website built with flutter. It is inspired by Web Genius Lab Designs on Behan

David-Legend 148 Jan 16, 2022
Paper is a implementation of Flx Design System for Flutter

Paper is a implementation of Flx Design System for Flutter. Installing Add a lines like this to your pubspec.yaml. dependencies: paper: git:

Flx Team 3 Nov 21, 2021
A project to showcase usage of basic principles to convert any 3D design into a working application using Flutter.

Developing apps with 3D designs in flutter This project is developed to showcase how we can use some basic principles to convert any 3D design into a

Manas Pratap Thakur 23 Jan 8, 2022
This is a Yoga app made in Flutter. This is an integration of a model that i found on https://www.uistore.design.

Yoguha A Flutter project made with Firebase that helps you for your next Yoga sessions. It contains : An authentication system A timer Some relaxing p

Scythe 3 Oct 28, 2021
Flutter Theme Manager with Abstract Factory Design

extheme A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

Veli Bacik 25 Jan 7, 2022
Project created to replicate design made by DesignSense 😎

☀️ Weather App ❄️ Project created to replicate design made by DesignSense ?? . Demo: Packages used: flutter_svg: ^0.22.0 sleek_circular_slider: ^2.0.1

Mosart 9 Nov 25, 2021
Health Performance Monitor ui design in a neomorphism style.

Health Performance Monitor UI Health Performance Monitor ui design in a neomorphism effect built using Flutter. Show some ❤️ and star the repo, it mak

Roshini Mahendran 9 Sep 20, 2021
a project for learning all Flutter Widgets , sync from flutter.dev the officia website.

Flutter Widgets Catalog (WIP) 计划 1、使用Flutter开发一个全平台的Flutter Widgets Catalog APP,并且开源。在这个APP中可以通过图形化的方式查看所有Widgets的介绍,示例,视频教程。 2、所有文档内容由前一天从flutter.dev

ezshine 29 Jan 9, 2022
A low-cost Flutter screen adaptation solution(一个极低成本的 Flutter 屏幕适配方案)

A low-cost Flutter screen adaptation solution(一个极低成本的 Flutter 屏幕适配方案) 100% 还原 UI,只需要按照设计图写的宽高写即可 先看图片,设置的标准宽度是 360 iPhone 8 --------------------------

聂志洋 84 Jan 5, 2022
A collection of Flutter examples and demos.

Flutter samples A collection of open source samples that illustrate best practices for Flutter. Visual samples index The easiest way to browse through

Flutter 11.1k Jan 12, 2022
Lime client built using flutter

** This project ist OUT OF DATE and I am currently not able to maintain it ** What we are building Lime is a social media app, which allows you to pos

Sebastian Sellmair 356 Jan 11, 2022
The Flutter Planets app tutorial with commits per lesson

flutter planets tutorial This project contains the steps followed on the tutorial on sergiandreplace.com. Each lesson will correspond to a single bran

Sergi Martínez 711 Dec 26, 2021
News App created in Flutter using News API for fetching realtime data and Firebase as the backend and authenticator.

News Buzz News App created in Flutter using News API for fetching realtime data and Firebase as the backend and authenticator. Features Custom news fe

Ankur Kedia 506 Dec 11, 2021