{"id":13465534,"url":"https://github.com/LanarsInc/direct-select-flutter","last_synced_at":"2025-03-25T16:32:16.410Z","repository":{"id":46372509,"uuid":"175793339","full_name":"LanarsInc/direct-select-flutter","owner":"LanarsInc","description":"DirectSelect is a selection widget with an ethereal, full-screen modal popup displaying the available choices when the widget is interact with. https://dribbble.com/shots/3876250-DirectSelect-Dropdown-ux","archived":false,"fork":false,"pushed_at":"2024-01-10T16:18:11.000Z","size":3978,"stargazers_count":762,"open_issues_count":10,"forks_count":63,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-07-31T15:01:34.834Z","etag":null,"topics":["flutter","flutter-ui","flutter-ui-collection","selection-widget","widget"],"latest_commit_sha":null,"homepage":null,"language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LanarsInc.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":"2019-03-15T09:51:29.000Z","updated_at":"2024-07-31T03:08:31.000Z","dependencies_parsed_at":"2024-06-19T14:59:20.641Z","dependency_job_id":"df91b616-f192-45ed-957d-9ea23ecb2087","html_url":"https://github.com/LanarsInc/direct-select-flutter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LanarsInc%2Fdirect-select-flutter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LanarsInc%2Fdirect-select-flutter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LanarsInc%2Fdirect-select-flutter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LanarsInc%2Fdirect-select-flutter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LanarsInc","download_url":"https://codeload.github.com/LanarsInc/direct-select-flutter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222088571,"owners_count":16928979,"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":["flutter","flutter-ui","flutter-ui-collection","selection-widget","widget"],"created_at":"2024-07-31T15:00:31.648Z","updated_at":"2024-10-29T17:31:08.644Z","avatar_url":"https://github.com/LanarsInc.png","language":"Dart","funding_links":[],"categories":["Components","Dart","组件","UI [🔝](#readme)"],"sub_categories":["UI"],"readme":"# direct-select-flutter\nDirectSelect is a selection widget with an ethereal, full-screen modal popup displaying the available choices when the widget is interact with. \nInspired by [dribble shot](https://dribbble.com/shots/3876250-DirectSelect-Dropdown-ux).\n\nMade in [lanars.com](https://lanars.com).\n\n[![pub package](https://img.shields.io/pub/v/direct_select_flutter.svg)](https://pub.dev/packages/direct_select_flutter)\n\u003ca href=\"https://github.com/Solido/awesome-flutter\"\u003e\n   \u003cimg alt=\"Awesome Flutter\" src=\"https://img.shields.io/badge/Awesome-Flutter-blue.svg?longCache=true\u0026style=flat-square\" /\u003e\n\u003c/a\u003e\n\n# iOS\n\n\u003cimg src=\"https://raw.githubusercontent.com/LanarsInc/direct-select-flutter/master/example/direct-select-ios.gif\" width=\"300\"\u003e\n\n# Android \n\n\u003cimg src=\"https://raw.githubusercontent.com/LanarsInc/direct-select-flutter/master/example/direct-select-android.gif\" width=\"300\"\u003e\n\n# Usage\n\n Create DirectSelectList and fill it with items using itemBuilder\n```dart\n    final dsl = DirectSelectList\u003cString\u003e(\n        values: _cities,\n        defaultItemIndex: 3,\n        itemBuilder: (String value) =\u003e getDropDownMenuItem(value),\n        focusedItemDecoration: _getDslDecoration(),\n        onItemSelectedListener: (item, index, context) {\n          Scaffold.of(context).showSnackBar(SnackBar(content: Text(item)));\n        });\n```\n Create items like this\n```dart\n  DirectSelectItem\u003cString\u003e getDropDownMenuItem(String value) {\n    return DirectSelectItem\u003cString\u003e(\n        itemHeight: 56,\n        value: value,\n        itemBuilder: (context, value) {\n          return Text(value);\n        });\n  }\n  ```\n Create decorations for focused items\n ```dart\n   _getDslDecoration() {\n    return BoxDecoration(\n      border: BorderDirectional(\n        bottom: BorderSide(width: 1, color: Colors.black12),\n        top: BorderSide(width: 1, color: Colors.black12),\n      ),\n    );\n  }\n```\n Create DirectSelectContainer and fill it with your data\n```dart\nScaffold(\n      appBar: appBar,\n      body: DirectSelectContainer(\n        child: Padding(\n          padding: const EdgeInsets.all(16.0),\n          child: Column(\n            mainAxisSize: MainAxisSize.min,\n            verticalDirection: VerticalDirection.down,\n            children: \u003cWidget\u003e[\n              SizedBox(height: 150.0),\n              Padding(\n                padding: const EdgeInsets.all(8.0),\n                child: Column(\n                  children: \u003cWidget\u003e[\n                    Container(\n                      alignment: AlignmentDirectional.centerStart,\n                      margin: EdgeInsets.only(left: 4),\n                      child: Text(\"City\"),\n                    ),\n                    Padding(\n                      padding: const EdgeInsets.fromLTRB(0, 8, 0, 0),\n                      child: Card(\n                        child: Row(\n                          mainAxisSize: MainAxisSize.max,\n                          children: \u003cWidget\u003e[\n                            Expanded(\n                                child: Padding(\n                                    child: DirectSelectList\u003cString\u003e(\n                                                     values: _cities,\n                                                     defaultItemIndex: 3,\n                                                     itemBuilder: (String value) =\u003e getDropDownMenuItem(value),\n                                                     focusedItemDecoration: _getDslDecoration(),\n                                                     onItemSelectedListener: (item, index, context) {\n                                                       Scaffold.of(context).showSnackBar(SnackBar(content: Text(item)));\n                                                     }),\n                                    padding: EdgeInsets.only(left: 12))),\n                            Padding(\n                              padding: EdgeInsets.only(right: 8),\n                              child: Icon(\n                                Icons.unfold_more,\n                                color: Colors.black38,\n                              ),\n                            )\n                          ],\n                        ),\n                         ),\n                    ),\n                  ],\n                ),\n              ),\n            ],\n          ),\n        ),\n      ),\n    );\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLanarsInc%2Fdirect-select-flutter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLanarsInc%2Fdirect-select-flutter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLanarsInc%2Fdirect-select-flutter/lists"}