Flatter

We make Flutter flat, We are Flatter 👋

The logo is contributed with ❤️ by Mahmoud Hussein

Table of contents

• What's Flatter?
• Widget Modifier
• Components
  • Layouts
  • Modifiers
  • Widget Extensions
  • Text Extensions
• Contribution
• Changelog
• License

What's Flatter?

Flatter is an extra-light and powerful solution for the hell of nested widgets in Flutter. Flatter makes Flutter widgets flat, concise, readable, and maintainable. Flatter hides the verbosity of Flutter widgets by exposing declarative APIs for different components. Let's see it in practice

Before

InkWell(
      onTap: () {},
      child: const Center(
        child: Padding(
            padding: EdgeInsets.all(20),
            child: DecoratedBox(
                decoration: BoxDecoration(boxShadow: [
                  BoxShadow(
                      color: Colors.black,
                      blurRadius: 20,
                      spreadRadius: 1.0,
                      offset: Offset(10.0, 10.0))
                ]),
                child: Text(
                  'Example',
                  style: TextStyle(
                      color: Colors.black,
                      fontSize: 17.0,
                      fontWeight: FontWeight.bold),
                ))),
      ),
    );

After

Text('Example')
        .textStyle(color: Colors.black, fontSize: 18.0, fontWeight: FontWeight.bold)
        .shadow(color: Colors.black, blurRadius: 20, spreadRadius: 1.0)
        .padding(20)
        .center()
        .inkWell(onTap: () {});

Flatter adds the following advantages

1. x Flat: There's no nesting and the code moves from top to down. In the classic approach, the code moves from top-left to bottom-right.

2. x Concise: The code is concise with zero verbosity and this make it more readable and maintainable.

3. x Natural: The code is more natural because you read it like: a text with some style that has a shadow and padding, and it's centered and handles onTap. In the classic approach, you read like: an onTap with center with shadow with text which has some style!

4. x Inside Out: Flatter is inside out, because you declare the widget then add its properties below it using . operator. In the classic approach, you declare the widget then wrap it inside its properties.

5. x Designed For Change: Changing UI in Flatter is easier than the classic approach. Suppose you need to put the padding inside the shadow in the previous example. You just need to move the shadow line after the padding like this:

Text('Example')
        .textStyle(color: Colors.black, fontSize: 18.0, fontWeight: FontWeight.bold)
        .padding(20) // The padding is now inside the shadow!
        .shadow(color: Colors.black, blurRadius: 20, spreadRadius: 1.0)
        .center()
        .inkWell(onTap: () {});

Another Example

Before

        Container(
          width: double.infinity,
          padding: EdgeInsets.all(15.0),
          decoration: BoxDecoration(
              color: Colors.white,
              boxShadow: const [BoxShadow(color: Colors.black, blurRadius: 3)],
              borderRadius: BorderRadius.vertical(top: Radius.circular(25.0))),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              totalView(),
              SizedBox(height: 10.0),
              totalAmountView(),
              SizedBox(height: 10.0),
              InkWell(
                child: Container(
                  padding: EdgeInsets.all(15.0),
                  width: double.infinity,
                  decoration: BoxDecoration(
                      color: Colors.lightBlue,
                      borderRadius: BorderRadius.all(Radius.circular(30.0))),
                  child: Text(
                    'CheckOut',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        color: Colors.white, fontWeight: FontWeight.bold),
                  ),
                ),
              ),
            ],
          ),
        );

After

FlatColumn(
          crossAxisAlignment: CrossAxisAlignment.start,
          of: () =>
                totalView() +
                SizedBox(height: 10.0) +
                totalAmountView() +
                SizedBox(height: 10.0) +
                checkoutView())
        .inkWell(onTap: () {})
        .padding(15)
        .container(width: double.infinity)
        .background(color: Colors.white, radius: 25)
        .shadow(color: Colors.black54, spreadRadius: 1)
        .paddingSymmetric(vertical: 10, horizontal: 10);

Widget Modifier

WidgetModifier is the heart of Flatter. A modifier that you apply to a view or another widget modifier, producing a different version of the original value. Adopt the WidgetModifier interface when you want to create a reusable modifier that you can apply to any widget. The example below combines several modifiers to create a new modifier that you can use to add background:

class BackgroundModifier implements WidgetModifier<Widget, DecoratedBox> {
BackgroundModifier(this.color);

Color color;

    @override
    DecoratedBox body(Widget content) {
        return DecoratedBox(
            decoration: BoxDecoration(color: color),
            child: content,
        );
    }
}

You can apply modifier(_:) directly to a widget, but a more common and idiomatic approach uses modifier(_:) to define an extension to Widget itself that incorporates the widget modifier:

extension BackgroundExt on Widget {
  DecoratedBox background(Color color) {
    return modifier(BackgroundModifier(color));
  }
}

WidgetGroup

A wrapper for a list of widgets. You can create this object by concatenating widgets using plus + operator. This allows concatenating widgets with the + operator instead of creating a list of widgets using [] operators.

For example:

    FlatColumn(of: () => Text("Hello") + Text("World")

Concatenating Text("Hello") and Text("World") returns WidgetGroup.

Components

The different components of the packages can be categorized as the following:

• Layouts
• Modifiers
• Widget Extensions
• Text Extension

Layouts

Every layout implements WidgetFunction or WidgetGroupFunction

The table below contains the available layouts

Modifiers

The table below contains the available modifiers

Widget Extensions

The table below contains the available widget extensions

Text Extensions

The table below contains the available text extensions

WidgetFunction

A function that returns a widget. It's used and an alternative better syntax for child parameter. of parameter below is a WidgetFunction.

    FlatCenter(of: () => Text("Hello world"))

WidgetGroupFunction

A function that returns a WidgetGroup. It's used and an alternative better syntax for children parameter. of parameter below is a WidgetGroupFunction.

    FlatColumn(of: () => Text("Hello") + Text("World")

:clap: Contribution

All Pull Requests (PRs) are welcome. Help us make this library better.

Changelog

Look at Changelog for release notes.

License

Copyright (c) 2021 Shaban Kamel

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.