{"id":13471119,"url":"https://github.com/codegrue/card_settings","last_synced_at":"2026-02-23T17:25:19.979Z","repository":{"id":41459740,"uuid":"142491230","full_name":"codegrue/card_settings","owner":"codegrue","description":"A flutter package for building card based forms. ","archived":false,"fork":false,"pushed_at":"2024-06-27T08:45:00.000Z","size":23325,"stargazers_count":562,"open_issues_count":26,"forks_count":108,"subscribers_count":18,"default_branch":"master","last_synced_at":"2026-02-18T14:56:02.099Z","etag":null,"topics":["card-settings","cupertino","flutter","forms","material","picker"],"latest_commit_sha":null,"homepage":"https://pub.dartlang.org/packages/card_settings","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/codegrue.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":"2018-07-26T20:32:41.000Z","updated_at":"2026-01-30T14:30:25.000Z","dependencies_parsed_at":"2024-10-30T01:51:54.134Z","dependency_job_id":null,"html_url":"https://github.com/codegrue/card_settings","commit_stats":{"total_commits":333,"total_committers":21,"mean_commits":"15.857142857142858","dds":"0.43843843843843844","last_synced_commit":"0de143e9e9286e65cb3a4de61eb0af971a76f671"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/codegrue/card_settings","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codegrue%2Fcard_settings","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codegrue%2Fcard_settings/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codegrue%2Fcard_settings/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codegrue%2Fcard_settings/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codegrue","download_url":"https://codeload.github.com/codegrue/card_settings/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codegrue%2Fcard_settings/sbom","scorecard":{"id":296469,"data":{"date":"2025-08-11","repo":{"name":"github.com/codegrue/card_settings","commit":"89de2333276a813060553e569d841c4f76af7a0a"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.4,"checks":[{"name":"Code-Review","score":0,"reason":"Found 1/29 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/main.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:8: update your workflow using https://app.stepsecurity.io/secureworkflow/codegrue/card_settings/main.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/codegrue/card_settings/main.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/codegrue/card_settings/main.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/codegrue/card_settings/main.yml/master?enable=pin","Info:   0 out of   2 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   2 third-party GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 2 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-17T19:37:53.662Z","repository_id":41459740,"created_at":"2025-08-17T19:37:53.662Z","updated_at":"2025-08-17T19:37:53.662Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29749027,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-23T07:44:07.782Z","status":"ssl_error","status_checked_at":"2026-02-23T07:44:07.432Z","response_time":90,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["card-settings","cupertino","flutter","forms","material","picker"],"created_at":"2024-07-31T16:00:40.124Z","updated_at":"2026-02-23T17:25:19.963Z","avatar_url":"https://github.com/codegrue.png","language":"Dart","readme":"# Card Settings\n\n[![Awesome Flutter](https://img.shields.io/badge/Awesome-Flutter-blue.svg?longCache=true\u0026style=flat-square)](https://github.com/Solido/awesome-flutter)\n[![Pub Package](https://img.shields.io/pub/v/card_settings.svg)](https://pub.dartlang.org/packages/card_settings)\n[![GitHub stars](https://img.shields.io/github/stars/codegrue/card_settings?color=brightgreen)](https://github.com/codegrue/card_settings/stargazers)\n[![GitHub forks](https://img.shields.io/github/forks/codegrue/card_settings)](https://github.com/codegrue/card_settings/network/members)\n![GitHub repo size](https://img.shields.io/github/repo-size/codegrue/card_settings)\n\n[![CodeFactor](https://img.shields.io/codefactor/grade/github/codegrue/card_settings)](https://www.codefactor.io/repository/github/codegrue/card_settings)\n[![Coverage Status](https://coveralls.io/repos/github/codegrue/card_settings/badge.svg?branch=master)](https://coveralls.io/github/codegrue/card_settings?branch=master)\n[![Open Bugs](https://img.shields.io/github/issues-raw/codegrue/card_settings/bug?label=bugs\u0026color=orange)](https://github.com/codegrue/card_settings/issues?q=is%3Aissue+is%3Aopen+label%3Abug)\n[![Enhancement Requests](https://img.shields.io/github/issues-raw/codegrue/card_settings/enhancement?label=enhancements)](https://github.com/codegrue/card_settings/issues?q=is%3Aissue+is%3Aopen+label%3Aenhancement+)\n[![Closed Issues](https://img.shields.io/github/issues-closed-raw/codegrue/card_settings?color=lightgrey)](https://github.com/codegrue/card_settings/issues?q=is%3Aissue+is%3Aclosed)\n\n[![Buy Me A Coffee](https://img.shields.io/badge/Donate-Buy%20Me%20A%20Coffee-yellow.svg)](https://www.buymeacoffee.com/CodeGrue)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/codegrue/card_settings/pulls)\n[![Contributors](https://img.shields.io/github/contributors/codegrue/card_settings)](https://github.com/codegrue/card_settings/graphs/contributors)\n[![License](https://img.shields.io/github/license/codegrue/card_settings?color=brightgreen)](https://github.com/codegrue/card_settings/blob/master/LICENSE)\n\nA flutter package for building settings forms. This includes a library of pre-built form field widgets. It supports both Material and Cupertino style.\n\n![Screenshot](https://github.com/codegrue/card_settings/blob/master/images/example.png)\n\nThis package consists of a CardSettings layout wrapper and a series of form field options including:\n\n- **Text Fields**\n  - `CardSettingsText` - Basic text field\n  - `CardSettingsParagraph` - Multiline text field with a counter\n  - `CardSettingsEmail` - A text field pre-configured for email input\n  - `CardSettingsPassword` - A text field pre-configured for passwords\n  - `CardSettingsPhone` - A masked phone entry field (US style currently)\n- **Numeric Fields**\n  - `CardSettingsDouble` - Field for double precision numbers\n  - `CardSettingsInt` - Field for integer numbers\n  - `CardSettingsCurrency` - Field for currency entry\n  - `CardSettingsSwitch` - Field for boolean state\n- **Pickers**\n  - `CardSettingsListPicker` - Picker list of arbitrary options\n  - `CardSettingsNumberPicker` - Picker list of numbers in a given range\n  - `CardSettingsRadioPicker` - Single items picker with radio buttons\n  - `CardSettingsSelectionPicker` - Single selection from a list with optional icons\n  - `CardSettingsCheckboxPicker` - Select multiples from a list of available options\n  - `CardSettingsColorPicker` - Picker for colors with three flavors: RGB, Material, and Block\n  - `CardSettingsDatePicker` - Date Picker\n  - `CardSettingsTimePicker` - Time Picker\n  - `CardSettingsDateTimePicker` - Combo Date and Time Picker\n  - `CardSettingsFilePicker` - Upload a file from the device\n- **Informational Sections**\n  - `CardSettingsHeader` - A control to put a header between form sections\n  - `CardSettingsInstructions` - Informational read-only text\n- **Actions**\n  - `CardSettingsButton` - Actions buttons for the form\n\nAll fields support `validate`, `onChange`, `onSaved`, `autovalidate`, and `visible`.\n\nThe package also includes these additonal items:\n\n- _CardSettingsField_ - The base layout widget. You can use this to build custom fields\n- _Converters_ - a set of utility functions to assist in converting data into and out of the fields\n\n## Simple Example\n\nAll fields in this package are compatible with the standard Flutter Form widget. Simply wrap the CardSettings control in a form and use it as you normally would with the form functionality.\n\n```dart\n  String title = \"Spheria\";\n  String author = \"Cody Leet\";\n  String url = \"http://www.codyleet.com/spheria\";\n\n  final GlobalKey\u003cFormState\u003e _formKey = GlobalKey\u003cFormState\u003e();\n\n  @override\n  Widget build(BuildContext context) {\n      body: Form(\n        key: _formKey,\n        child: CardSettings(\n          children: \u003cCardSettingsSection\u003e[\n            CardSettingsSection(\n              header: CardSettingsHeader(\n                label: 'Favorite Book',\n              ),\n              children: \u003cCardSettingsWidget\u003e[\n                CardSettingsText(\n                  label: 'Title',\n                  initialValue: title,\n                  validator: (value) {\n                    if (value == null || value.isEmpty) return 'Title is required.';\n                  },\n                  onSaved: (value) =\u003e title = value,\n                ),\n                CardSettingsText(\n                  label: 'URL',\n                  initialValue: url,\n                  validator: (value) {\n                    if (!value.startsWith('http:')) return 'Must be a valid website.';\n                  },\n                  onSaved: (value) =\u003e url = value,\n                ),\n              ],\n            ),\n          ),\n        ),\n      ),\n    );\n  }\n```\n\nIf you would like separate cards for each section, then use the `.sectioned` constructor:\n\n```dart\n        child: CardSettings.sectioned(\n          ...\n        ),\n```\n\nSee the full demo example [here](https://pub.dartlang.org/packages/card_settings#-example-tab-).\n\n### Theming\n\nThe style of the widgets can be either Material or Cupertino. There is a toggle on the CardSettings widget to globally change the style:\n\n```dart\n  return CardSettings(\n    showMaterialonIOS: true, // default is false\n  );\n```\n\nThis also exists on each field widget, in case you want to control this more granularly.\n\nIf you are using the Material design style, then the `MaterialApp` theme takes effect. This example shows what global theme values to set to determine how the various elements appear.\n\n```dart\nclass MyApp extends StatelessWidget {\n\n  @override\n  Widget build(BuildContext context) {\n    return new MaterialApp(\n      title: 'Card Settings Example',\n      home: new HomePage(),\n      theme: ThemeData(\n        primaryColor: Colors.teal, // app header background\n        secondaryHeaderColor: Colors.indigo[400], // card header background\n        cardColor: Colors.white, // card field background\n        backgroundColor: Colors.indigo[100], // app background color\n        buttonColor: Colors.lightBlueAccent[100], // button background color\n        textTheme: TextTheme(\n          button: TextStyle(color: Colors.deepPurple[900]), // button text\n          subtitle1: TextStyle(color: Colors.grey[800]), // input text\n          headline6: TextStyle(color: Colors.white), // card header text\n        ),\n        primaryTextTheme: TextTheme(\n          headline6: TextStyle(color: Colors.lightBlue[50]), // app header text\n        ),\n        inputDecorationTheme: InputDecorationTheme(\n          labelStyle: TextStyle(color: Colors.indigo[400]), // style for labels\n        ),\n      ),\n    );\n  }\n}\n\n```\n\nOr if you want to apply a different theme to the `CardSettings` hierarchy only, you can wrap it in a `Theme` widget like so:\n\n```dart\n  Theme(\n    data: Theme.of(context).copyWith(\n      primaryTextTheme: TextTheme(\n        headline6: TextStyle(color: Colors.lightBlue[50]), // app header text\n      ),\n      inputDecorationTheme: InputDecorationTheme(\n        labelStyle: TextStyle(color: Colors.deepPurple), // style for labels\n      ),\n    ),\n    child: CardSettings(\n      ...\n    ),\n  )\n```\n\nPlease see \u003chttps://pub.dev/packages/flutter_material_pickers#-readme-tab-\u003e for information on how to theme the dialog popups.\n\n### Card Style\n\nBy default, in Material mode, the content is inside a Card or Cards (if sectioned).\n\n![Carded](https://github.com/codegrue/card_settings/blob/master/images/carded_example.png)\n\nIf you would rather just have a flat style with no border, set `cardless` to false.\n\n![Cardless](https://github.com/codegrue/card_settings/blob/master/images/cardless_example.png)\n\n```dart\n  return CardSettings(\n    cardless: true; // default is false\n  );\n```\n\nThis has no effect in Cupertino mode, as that doesn't have a card to begin with.\n\nYou can also change the actual card styleing through the theme for example:\n\n![Custom](https://github.com/codegrue/card_settings/blob/master/images/custom_border_example.png)\n\n```dart\n  cardTheme: CardTheme(\n    shape: RoundedRectangleBorder(\n      side: BorderSide(width: 2, color: Colors.orange),\n      borderRadius: BorderRadius.circular(20),\n    ),\n  ),\n```\n\n### Global Properties\n\nThe `CardSettings` widget implements a few global settings that all child fields can inherit. Currently it supports only label customization.\n\n#### Labels\n\nYou can control how the labels are rendered with four properties:\n\n```dart\n  CardSettings(\n    labelAlign: TextAlign.right, // change the label alignment\n    labelWidth: 120.0, // change how wide the label portion is\n    labelSuffix: ':', // add an optional tag after the label\n    labelPadding: 10.0, // control the spacing between the label and the content\n    contentAlign: TextAlign.left, // alignment of the entry widgets\n    icon: Icon(Icons.person), // puts and option icon to the left of the label\n    requiredIndicator: Text('*', style: TextStyle(color: Colors.red)), // puts an optional indicator to the right of the label\n  )\n```\n\nThe `labelAlign` and `contentAlign` properties are also available on each field, so you can override the global setting for individual fields.\n\n```dart\n  CardSettingsText(\n    label: 'Last Name',\n    labelAlign: TextAlign.left,\n    contentAlign: TextAlign.right,\n  )\n```\n\n### Headers\n\n`CardSettingsHeader` provides properties to set the color, height, and label alignment. However, if you wish to completely override the default header style and replace it with something custom, you can use the `child` property to pass in your own widget tree:\n\n```dart\nheader: CardSettingsHeader(\n  child: Container(\n    height: 80,\n    child: Row(\n      children: [\n        Expanded(child: Divider(color: Colors.purple, thickness: 5)),\n        Text('Custom Header', style: TextStyle(fontSize: 20)),\n        Expanded(child: Divider(color: Colors.purple, thickness: 5)),\n      ],\n    ),\n  ),\n),\n```\n\n### Dynamic Visibility\n\nEach field implements a `visible` property that you can use to control the visibility based on the value of other fields. In this example, the switch field controls the visibility of the text field:\n\n```dart\n  bool _ateOut = false;\n\n  CardSettingsSwitch(\n    label: 'Ate out?',\n    initialValue: _ateOut,\n    onChanged: (value) =\u003e setState(() =\u003e _ateOut = value),\n  ),\n\n  CardSettingsText(\n    label: 'Restaurant',\n    visible: _ateOut,\n  ),\n```\n\n### Masking\n\nThe `CardSettingsText` widget has an `inputMask` property that forces entered text to conform to a given pattern. This is built upon the [flutter_masked_text](https://pub.dartlang.org/packages/flutter_masked_text)\npackage and as such masks are formatted with the following characters:\n\n- 0: accept numbers\n- A: accept letters\n- @: accept numbers and letters\n- \\*: accept any character\n\nSo for example, phone number would be '(000) 000-0000'.\n\nNote: `CardSettingsPhone` is a convenience widget that is pre-configured to use this pattern.\n\nCaution: `flutter_masked_text` is a controller and as such, you will not be able to use an inputMask and a custom controller at the same time. This might be rectified in the future.\n\n### Orientation\n\nThis suite allows for orientation switching. To configure this, build different layouts depending on the orientation provided by `MediaQuery`.\n\nYou might want to have different fields in each layout, or a different field order. So that Flutter doesn't get confused tracking state under this circumstance, you must provide a unique state key for each individual field, using the same key in each layout.\n\n```dart\n@override\nWidget build(BuildContext context) {\n\n  final GlobalKey\u003cFormState\u003e _emailKey = GlobalKey\u003cFormState\u003e();\n  var orientation = MediaQuery.of(context).orientation;\n\n  return Form\n    key: _formKey,(\n    child: (orientation == Orientation.portraitUp)\n        ? CardSettings(children: \u003cWidget\u003e[\n              // Portrait layout here\n              CardSettingsEmail(key: _emailKey)\n            ])\n        : CardSettings(children: \u003cWidget\u003e[\n              // Landscape layout here\n              CardSettingsEmail(key: _emailKey)\n            ]);\n    },\n  );\n}\n```\n\nYou may have multiple fields on the same row in landscape orientation. This normally requires the use of container widgets to provide the layout inside the row. Instead, you can use the `CardFieldLayout` helper widget to streamline this. It will by default make it's children equally spaced, but you can provide an array of flex values to control the relative sizes.\n\n```dart\n// equally spaced example\nCardSettings(\n  children: \u003cWidget\u003e[\n    CardFieldLayout(children: \u003cWidget\u003e[\n      CardSettingsEmail(),\n      CardSettingsPassword(),\n    ]),\n  ],\n);\n```\n\n```dart\n// relative width example\nCardSettings(\n  children: \u003cWidget\u003e[\n    CardFieldLayout_FractionallySpaced(\n      children: \u003cWidget\u003e[\n        CardSettingsEmail(),\n        CardSettingsPassword(),\n      ],\n      flexValues: [2, 1], // 66% and 33% widths\n    ),\n  ],\n);\n```\n\n### Custom Fields\n\nThe `CardSettingsField` is the basis of all other fields and can be used to build unique fields outside of this library. Its purpose is to govern layout with consistent decorations. The best way to make a custom field is to inherit from `FormField\u003cT\u003e`, which will manage the state of your field. The cleanest example of this is the `CardSettingsSwitch` widget. All you have to do is provide your custom widgets in the `content` property.\n\n### Custom Widgets\n\nIf you wish to provide a custom widget that is _not_ a field type layout, you need to implement the `CardSettingsWidget` interface as so:\n\n```dart\nclass CardSettingsHeader extends StatelessWidget implements CardSettingsWidget {\n  ...\n}\n```\n\n## Screenshots\n\n|                                         Material                                          |                                       Cupertino                                       |\n| :---------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------: |\n| ![Screenshot](https://github.com/codegrue/card_settings/blob/master/images/android/1.png) | ![Screenshot](https://github.com/codegrue/card_settings/blob/master/images/ios/3.png) |\n|                                :-------------------------:                                |                              :-------------------------:                              |\n| ![Screenshot](https://github.com/codegrue/card_settings/blob/master/images/android/2.png) | ![Screenshot](https://github.com/codegrue/card_settings/blob/master/images/ios/7.png) |\n|                                :-------------------------:                                |                              :-------------------------:                              |\n| ![Screenshot](https://github.com/codegrue/card_settings/blob/master/images/android/5.png) | ![Screenshot](https://github.com/codegrue/card_settings/blob/master/images/ios/4.png) |\n\n## Dependencies\n\nThis widget set relies on these external third-party components:\n\n- [flutter_colorpicker](https://pub.dartlang.org/packages/flutter_colorpicker)\n- [flutter_masked_text](https://pub.dartlang.org/packages/flutter_masked_text)\n\n## Changelog\n\nPlease see the [Changelog](https://github.com/codegrue/card_settings/blob/master/CHANGELOG.md) page to know what's recently changed.\n\n## Contributions\n\nIf you find a bug or want a feature, but don't know how to fix/implement it, please fill an [issue](https://github.com/codegrue/card_settings/issues).\n\nIf you fixed a bug or implemented a new feature, please send a [pull request](https://github.com/codegrue/card_settings/pulls). **Please include a note about your change in CHANGELOG.md with your pull request.**\n","funding_links":["https://www.buymeacoffee.com/CodeGrue"],"categories":["Dart","Components","组件","UI [🔝](#readme)","Packages"],"sub_categories":["UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodegrue%2Fcard_settings","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodegrue%2Fcard_settings","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodegrue%2Fcard_settings/lists"}