flutter_modifiers 0.0.1

Flutter Android iOS web

A collection of useful extension function that make your flutter code a lot cleaner.

Flutter Modifiers #

A collection of useful extension function that make your flutter code a lot cleaner.

Why #

Flutter is a very powerful tool, it provide you with a lot of widgets that have different use cases to help you build your app.

But because everything is designed to be a widget, you will find your code have so many nested widgets, which makes your code hard to read and understand from the first look.

Other tools like SwiftUI, and Jetpack Compose, have something called modifiers, which can provide some of functionality of Flutter widgets but in a simple way.

For example compare the following code

// SwiftUI Code
struct ContentView: View {
    var body: some View {
        VStack {
            Image("turtlerock")
              .clipShape(Circle())
              .offset(y: 10)
              .padding(.bottom, 10)

            Text("Turtle Rock")
              .padding()
        }
    }
}

// Flutter Code
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Padding(
          padding: EdgeInsets.only(bottom: 10.0),
          child: Transform.translate(
            child: ClipOval(
              child: Image.asset("turtlerock"),
            ),
            offset: Offset(0, 10.0),
          ),
        ),
        Padding(
          padding: EdgeInsets.all(8.0),
          child: Text(
            'Turtle Rock',
          ),
        )
      ],
    );
  }
}

You can clearly see the difference between both of them and how simple SwiftUI version is.

That's why I created these extension library which enables you to have the same result in simpler code.

Here is the same results but using modifiers

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Image.asset("assets/turtlerock.jpg")
            .clipOval()
            .translate(offset: Offset(0, 10))
            .padding(EdgeInsets.only(bottom: 10.0)),
        Text(
          'Turtle Rock',
        ).padding(),
      ],
    );
  }
}

How to use #

Import the library in your flutter file, then use the extensions function on any Widget

import 'package:flutter/material.dart';
import 'package:flutter_modifiers/flutter_modifiers.dart'; // <== add this import

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Image.asset("assets/turtlerock.jpg")
            .clipOval() // <=== use any modifier
            .translate(offset: Offset(0, 10)) // <=== use any modifier
            .padding(EdgeInsets.only(bottom: 10.0)), // <=== use any modifier
        Text(
          'Turtle Rock',
        ).padding(),
      ],
    );
  }
}

List of Modifiers #

ModifierCorrosponding ComponentDescription
paddingPaddingAdd padding to parent widget. Default padding is 8.0
centerCenterCenter parent widget
alignAlignAlign parent to specific alignement
aspectRatioAspectRatioSize parent to a specific aspect ratio
baselineBaselinePosition parent to specific baseline
constrainedBoxConstrainedBoxAdd additional constraint to parent
expandedExpandedExpand parent in expands a child of a [Row], [Column], or [Flex]
fittedBoxFittedBoxScales and positions parent within itself according to [fit]
fractionallySizedBoxFractionallySizedBoxsizes its parent to a fraction of the total available space
intrinsicHeightIntrinsicHeightSize its parent to parent's intrinsic height
intrinsicWidthIntrinsicWidthSize its parent to parent's intrinsic width
limitedBoxLimitedBoxLimit parent size only when it's unconstrained
offstageOffstagelays parent out as if it was in the tree, but without painting anything, without making the child available for hit testing, and without taking any room in the parent.
overflowBoxOverflowBoxImpose different constraints on its parent than it gets from its container, possibly allowing the parent to overflow the container
sizedBoxSizedBoxForce parent to have a specific width and/or height
sizedOverflowBoxSizedOverflowBoxSpecific size widget but passes its original constraints through to its parent, which may then overflow
transformTransformApply a transformation before painting its parent
rotateTransformTransform its parent using a rotation around the center
translateTransformTransforms its parent using a translation
scaleTransformScales its parent uniformly
clipOvalClipOvalClip its child using an oval
clipPathClipPathClip its child using a path
clipRectClipRectClip its child using a rectangle
opacityOpacityMake its parent partially transparent
themeThemeApply a theme to parent widget
4
likes
100
pub points
35%
popularity

A collection of useful extension function that make your flutter code a lot cleaner.

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

dr.m.shaban@gmail.com

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on flutter_modifiers