Easily build your Widgets, Avoid parenthesis nesting, easy to build UI, A little like swift-ui.

Overview

tenon_mortise

Easily build your Widgets, Avoid parenthesis nesting, easy to build UI, A little like swift-ui.

Getting Started

Usage

To use this plugin, add tenon_mortise as a dependency in your pubspec.yaml file.

Example

    import 'package:tenon_mortise/tenon_mortise.dart';

 [
          ["row Item1 ".toText(), 20.inRow, "row item 2".toText()].toRow(),
          20.inColumn,
          [
            "row Item1".toText().applyContainer(color: Colors.red),
            "row item 2".toText().applyContainer(color: Colors.green),
            "row item 2"
                .toText()
                .applyContainer(color: Colors.tealAccent)
                .expanded,
          ].toRow(),
          20.inColumn,
          [const Icon(Icons.info), 10.inColumn, "column test ".toText()]
              .toColumn(),
          20.inColumn,
          "aligment left".toText().applyAlign(alignment: Alignment.centerLeft),
          "aligment right"
              .toText()
              .applyAlign(alignment: Alignment.centerRight),
          20.inColumn,
          [
            "GridItem1"
                .toText()
                .applyContainer(color: Colors.tealAccent)
                .applyRadiusAll(10),
            "GridItem2".toText().applyContainer(color: Colors.red).applyRadius(
                borderRadius:
                    const BorderRadius.only(topLeft: Radius.circular(10))),
            "GridItem3".toText().applyContainer(color: Colors.green),
            "GridItem4".toText().applyContainer(color: Colors.blue),
            "GridItem5".toText().applyContainer(color: Colors.yellow),
          ]
              .toGridView(
                scrollDirection: Axis.vertical,
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  childAspectRatio: 4,
                  mainAxisSpacing: 10,
                  crossAxisSpacing: 10,
                ),
              )
              .applySizeBox(
                height: 100,
                width: double.infinity,
              ),
          20.inColumn,
          [
            "Wrap1 opacity:0.5"
                .toText()
                .applyContainer(color: Colors.tealAccent, width: 120)
                .applyOpacity(opacity: 0.5),
            "Wrap2 opacity:0.8"
                .toText()
                .applyContainer(color: Colors.red, width: 130)
                .applyOpacity(opacity: 0.8),
            "Wrap3".toText().applyContainer(color: Colors.green, width: 100),
            "Wrap4".toText().applyContainer(color: Colors.blue, width: 100),
            "Wrap5".toText().applyContainer(color: Colors.yellow, width: 100),
            "Wrap6".toText().applyContainer(color: Colors.yellow, width: 100),
            "Wrap7".toText().applyContainer(color: Colors.yellow, width: 100),
          ].toWrap(),
          [
            Switch(
                value: flag1,
                onChanged: (value) {
                  setState(() {
                    flag1 = value;
                  });
                }),
            flag1.toWidget(
              builder: () =>
                  "flag 1 to widget".toText().applyColor(color: Colors.red),
            ),
            20.inRow,
            "flag 1 to widget where flag ==false".toText().where(flag1 == false)
          ].toRow(),
          20.inColumn,
          [
            "inkwell:true click".toText().onClick(
                  inkWell: true,
                  click: () {
                    print("inkwell:true click");
                  },
                ),
            "inkwell:false click".toText().onClick(
                  inkWell: false,
                  click: () {
                    print("inkwell:false click");
                  },
                ),
          ].toRow(mainAxisAlignment: MainAxisAlignment.spaceEvenly),
          20.inColumn,
          [
            "applyInkWell".toText().applyInkWell(
              onTap: () {
                print("applyInkWell");
              },
            ),
            "applyGestureDetector".toText().applyGestureDetector(
              onTap: () {
                print("applyGestureDetector");
              },
            ),
          ].toRow(mainAxisAlignment: MainAxisAlignment.spaceEvenly)
        ].toListView(),

See the example app for more complex examples.

demo

This project is a starting point for a Flutter plug-in package, a specialized package that includes platform-specific implementation code for Android and/or iOS.

For help getting started with Flutter development, view the online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

You might also like...

custom flutter candies(widgets) for you to build flutter app easily, enjoy it

custom flutter candies(widgets) for you to build flutter app easily, enjoy it

Flutter Custom flutter candies(widgets) for you to easily build flutter app, enjoy it waterfall_flow A Flutter grid view easy to build waterfall flow

Nov 23, 2022

Most popular and easy to use open source UI library with 1000+ Widgets to build flutter app.

Most popular and easy to use open source UI library with 1000+ Widgets to build flutter app.

GetWidget is a 100% free Flutter open-source UI Kit library built with Flutter SDK to make Flutter development easier and more joyful than ever. GetWi

Jan 1, 2023

Most popular and easy to use open source UI library with 1000+ Widgets to build flutter app.

Most popular and easy to use open source UI library with 1000+ Widgets to build flutter app.

GetWidget is a 100% free Flutter open-source UI Kit library built with Flutter SDK to make Flutter development easier and more joyful than ever. GetWi

Jan 3, 2023

A collection of Flutter Widgets that make multi screen user experiences easy to build

A collection of Flutter Widgets that make multi screen user experiences easy to build

Multi Screen Layout for Flutter A collection of Widgets that make multi screen user experiences easy to build Supported Devices Surface Duo Surface Du

Dec 1, 2022

Easily build and deploy your Dart web app to GitHub pages

Run flutter build web or dart pub run build_runner build and put the output in another branch. An easy way to update gh-pages. Install $ dart pub glob

Dec 20, 2022

Aris inheritedwidget - The Inherited Widget helps you to easily distribute your app state to every widget in your Flutter app

Aris inheritedwidget - The Inherited Widget helps you to easily distribute your app state to every widget in your Flutter app

Flutter Tutorial - Inherited Widget The InheritedWidget helps you to easily dist

Dec 29, 2021

Git+ is your ultimate GitLab mobile app that lets you interact with your projects like as if you were using desktop.

Git+ is your ultimate GitLab mobile app that lets you interact with your projects like as if you were using desktop.

Git+ for GitLab Git+ is your ultimate GitLab mobile app that lets you interact with your projects like as if you were using desktop. Git+ lets you see

Jan 7, 2023

A Flutter package for simple and easy to use actions like buttons, checkboxes and switches.

A Flutter package for simple and easy to use actions like buttons, checkboxes and switches.

Easy Actions Overview A Flutter package for simple and easy to use actions like buttons, checkboxes and switches. Features Elevated Button Outlined Bu

Jun 25, 2022
Owner
JieLiu
developer
JieLiu
EZ Flutter is a collection of widgets, packages and many more usefull things, mixed up in little framework.

(Alpha) EZ Flutter is a collection of widgets, packages and many more usefull things, mixed up in a little framework. The aim is to make standard feat

null 65 Nov 5, 2022
The Swift code generator for your assets, storyboards, Localizable.strings, … — Get rid of all String-based APIs!

SwiftGen SwiftGen is a tool to automatically generate Swift code for resources of your projects (like images, localised strings, etc), to make them ty

null 8.3k Dec 31, 2022
Flutter Multi-platform allows developers to unleash their app to run on the wide variety of different platforms with little or no change.

Flutter Multi-platform sample Flutter Multi-platform allows developers to unleash their app to run on the wide variety of different platforms with lit

MindInventory 22 Dec 31, 2022
A simple bank UI template with a little bit of backend. Created by Martin Gogołowicz.

Flutter Bank UI A simple bank UI template with a little bit of backend. Created by Martin Gogołowicz. How it looks: Nagranie.z.ekranu.2021-12-2.o.21.5

Martin Gogołowicz 20 Oct 14, 2022
An unofficial Flutter plugin that wraps pusher-websocket-java on Android and pusher-websocket-swift on iOS

Pusher Flutter Client An unofficial Flutter plugin that wraps pusher-websocket-java on Android and pusher-websocket-swift on iOS. Get it from pub. How

HomeX 31 Oct 21, 2022
Safe is an open source mobile platorm to discretely capture incidents with ease, powered by an SMCE written in native Swift and Kotlin.

Safe A powerful tool for personal and community safety. joinsafe.me » Available for iOS & Android ~ Links will be added once a release is available. ~

Safe 10 Oct 26, 2022
Encode App-Dev is a open source project which contains different projects of Application development, Android development, IOS development, Flutter, Kotlin, Dart, Java, Swift etc.

HACKTOBERFEST 2022 Encode App-Dev is an open source project which contains different projects of Application development, Android development, IOS dev

null 4 Dec 4, 2022
A most easily usable cookie management library in Dart. With SweetCookieJar, you can easily manage cookie on your application.

A most easily usable cookie management library in Dart! 1. About 1.1. Introduction 1.1.1. Install Library 1.1.2. Import It 1.1.3. Use SweetCookieJar 1

Kato Shinya 9 Oct 27, 2022
A most easily usable cache management library in Dart. With CacheStorage, you can easily manage cache on your application.

A most easily usable cache management library in Dart! 1. About 1.1. Introduction 1.1.1. Install Library 1.1.2. Import It 1.1.3. Use CacheStorage 1.2.

Kato Shinya 1 Dec 13, 2021
A most easily usable RESAS API wrapper in Dart. With this library, you can easily integrate your application with the RESAS API.

A most easily usable RESAS API wrapper library in Dart! 1. About 1.1. What Is RESAS? 1.2. Introduction 1.2.1. Install Library 1.2.2. Import It 1.2.3.

Kato Shinya 2 Apr 7, 2022