{"id":15549916,"url":"https://github.com/ahyangnb/flutter_compose_ui_modifiers","last_synced_at":"2025-03-27T04:26:08.303Z","repository":{"id":237126014,"uuid":"793862154","full_name":"ahyangnb/flutter_compose_ui_modifiers","owner":"ahyangnb","description":null,"archived":false,"fork":false,"pushed_at":"2024-05-23T07:37:02.000Z","size":142,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-23T07:46:56.352Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ahyangnb.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-30T02:28:52.000Z","updated_at":"2024-05-28T06:58:10.142Z","dependencies_parsed_at":"2024-05-28T06:58:08.114Z","dependency_job_id":"c47d7d07-d925-47a9-855d-b2c5b1f8c8bb","html_url":"https://github.com/ahyangnb/flutter_compose_ui_modifiers","commit_stats":null,"previous_names":["ahyangnb/flutter_compose_ui_modifiers"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahyangnb%2Fflutter_compose_ui_modifiers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahyangnb%2Fflutter_compose_ui_modifiers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahyangnb%2Fflutter_compose_ui_modifiers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahyangnb%2Fflutter_compose_ui_modifiers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ahyangnb","download_url":"https://codeload.github.com/ahyangnb/flutter_compose_ui_modifiers/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245781504,"owners_count":20671061,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-02T13:43:38.202Z","updated_at":"2025-03-27T04:26:08.284Z","avatar_url":"https://github.com/ahyangnb.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FlutterUI Modifiers\n\nuse [https://pub.dev/packages/flutterui_modifiers](flutterui_modifiers) change.\n\nFlutterUI Modifiers is a collection of declarative widget modifiers to make your Flutter code\nshorter and linear.\n\nModern tools like Jetpack Compose and SwiftUI use view modifiers to make code easy to write and\nunderstand.\n\n**This package provides the best of both worlds: Flutter's platform independence, and SwiftUI's\nclean modifier syntax.**\n\n## Installation\n\nAdd flutter_compose_ui_modifiers as dependency to your pubspec file.\n\n```\nflutter_compose_ui_modifiers:\n```\n\n## Why use modifiers?\n\nWe all know that Flutter is a powerful framework to build apps with.\u003cbr\u003eBut we also know that\nFlutter code can become hard to read due to all those nested widgets.\n\nTools like Google's Jetpack Compose and Apple's SwiftUI embrace the concept of modifiers.\n\nModifiers are functionality the same as Flutter widgets.\u003cbr\u003eThe difference is that, where Flutter\ncode is nested, modifiers are linear.\n\nThis makes the code easyer to understand at a glance! 🎉\n\n## Example\n\nWith FlutterUI Modifiers, write this:\n\n```dart\nWidget newTextWidget() {\n  return MText(\n    modifier: MTextModifier.color(Colors.blue)\n        .onClick(() =\u003e print(\"hi\"))\n        .fontSize(50)\n        .fontWeight(FontWeight.w200)\n        .backgroundColor(Colors.red.withOpacity(0.3))\n        .borderRadius(10)\n        .size(const Size(200, 300))\n        .marginBottom(300)\n        .paddingTop(50)\n        .center(true),\n    data: 'can click me!',\n  );\n}\n```\n\nInstead of this:\n\n```dart\nWidget beInsteadText() {\n  return InkWell(\n    onTap: () =\u003e print('hi'),\n    child: Container(\n      width: 200,\n      height: 300,\n      margin: EdgeInsets.only(bottom: 300),\n      padding: EdgeInsets.only(top: 50),\n      alignment: Alignment.center,\n      decoration: BoxDecoration(\n        color: Colors.red.withOpacity(0.3),\n        borderRadius: BorderRadius.all(Radius.circular(10)),\n      ),\n      child: Text(\n        'can click me!',\n        style: TextStyle(\n            color: Colors.blue, fontSize: 50, fontWeight: FontWeight.w200),\n      ),\n    ),\n  );\n}\n```\n\n\nor this :\n\n```dart\nList\u003cWidget\u003e list = [];\nText('Hello, World!')\n    .bold()\n    .font(size: 22)\n    .help('We love you 🌍')\n    .padding(all: 16)\n    .centered()\n    .assign(list);\n```\n\nInstead of this:\n\n```\nList\u003cWidget\u003e list = [];\nlist.add(\n  Center(\n    child: Padding(\n      padding: EdgeInsets.all(16.0),\n      child: Tooltip(\n        message: 'We love you 🌍',\n        child: Text(\n          'Hello, World!',\n          style: TextStyle(\n            fontWeight: FontWeight.bold,\n            fontSize: 22,\n          ), // TextStyle\n        ), // Text\n      ), // Tooltip\n    ),\n  ), // Center\n);\n```\n\n## List of modifiers\n\nAll view modifiers contain in-code comment documentation with examples.\n\nPlease note that some view modifiers are specific to widgets like `Text()` or various Buttons and\nwill not work on other widgets that don't support them.\n\n| Status | Modifier                    | Widget(s)             |\n|--------|-----------------------------|-----------------------|\n| 🟢     | `.align()`                  | *                     |\n| 🟢     | `.aspectRatio()`            | *                     |\n| 🟢     | `.assign()`                 | *                     |\n| 🟢     | `.centered()`               | *                     |\n| 🔴     | `.controlSize()`            | `Button`, `TextField` |\n| 🟠     | `.background()`             | *                     |\n| 🟡     | `.backgroundColor()`        | *                     |\n| 🟢     | `.bold()`                   | `Text`                |\n| 🟠     | `.border()`                 | *                     |\n| 🟡     | `.clipOval()`               | *                     |\n| 🟡     | `.clipPath()`               | *                     |\n| 🟡     | `.clipRect()`               | *                     |\n| 🟠     | `.clip()`                   | *                     |\n| 🟢     | `.color()`                  | `Text`                |\n| 🟢     | `.corner()`                 | *                     |\n| 🟢     | `.direction()`              | `Icon`, `Text`        |\n| 🟢     | `.disabled()`               | `Button`              |\n| 🟡     | `.flex()`                   | *                     |\n| 🟢     | `.font()`                   | `Icon`, `Text`        |\n| 🟢     | `.frame()`                  | *                     |\n| 🟢     | `.help()`                   | *                     |\n| 🟡     | `.hideThumb()`              | `ListView`            |\n| 🟢     | `.margin()`                 | *                     |\n| 🟢     | `.multilineTextAlignment()` | `Text`                |\n| 🟢     | `.offset()`                 | *                     |\n| 🟠     | `.onDrag()`                 | *                     |\n| 🟠     | `.onDrop()`                 | *                     |\n| 🟠     | `.onDoubleTap()`            | *                     |\n| 🟢     | `.onHover()`                | *                     |\n| 🟡     | `.onLongTap()`              | `Button`              |\n| 🟢     | `.onTap()`                  | *                     |\n| 🟢     | `.opacity()`                | *                     |\n| 🟠     | `.overlay()`                | *                     |\n| 🟢     | `.padding()`                | *                     |\n| 🔴     | `.popover()`                | *                     |\n| 🟢     | `.rotate()`                 | *                     |\n| 🟡     | `.scale()`                  | *                     |\n| 🟢     | `.semantic()`               | `Icon`                |\n| 🟢     | `.shadow()`                 | *                     |\n| 🔴     | `.sheet()`                  | *                     |\n| 🟡     | `.style()`                  | `Text`, `TextField`   |\n| 🟡     | `.transform()`              | *                     |\n\n| _  | Legend                               |\n|----|--------------------------------------|\n| 🟢 | *Implemented*                        |\n| 🟡 | *Implemented, but subject to change* |\n| 🟠 | *Work in progress*                   |\n| 🔴 | *Not yet implemented*                |\n| *  | *Available on all types*             |\n\n## Technical notes\n\nView modifiers work by telling the widget to wrap itself in another widget and then returning itself\nto the caller.\n\n### Modifier chain\n\nA modifier chain is a sequence of modifiers on a view.\n\n### Type handover\n\nType handover is the technique of not wrapping widgets of the same class in each other if they are\nsubsequent to each other.\n\nSo if the modifier chain looks like this:\n\n`[ Center \u003e Container \u003e Container \u003e Container \u003e Text \u003e Text ]`\n\nFlutterUI will render the view hierarch like this:\n\n`[ Center \u003e Container \u003e Text ]`\n\nThis makes sure that the view hierarchy doesn't become more complex than necessary.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahyangnb%2Fflutter_compose_ui_modifiers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fahyangnb%2Fflutter_compose_ui_modifiers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahyangnb%2Fflutter_compose_ui_modifiers/lists"}