{"id":16583795,"url":"https://github.com/aloisdeniel/spaces","last_synced_at":"2025-03-21T12:33:14.423Z","repository":{"id":49661721,"uuid":"288781964","full_name":"aloisdeniel/spaces","owner":"aloisdeniel","description":"Defining global spacing constants for building consistent and responsive apps.","archived":false,"fork":false,"pushed_at":"2021-06-11T08:31:02.000Z","size":93,"stargazers_count":41,"open_issues_count":3,"forks_count":11,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-12T22:43:20.083Z","etag":null,"topics":["flutter","responsive","spacing","ui"],"latest_commit_sha":null,"homepage":"","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/aloisdeniel.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}},"created_at":"2020-08-19T16:26:04.000Z","updated_at":"2024-07-27T09:01:42.000Z","dependencies_parsed_at":"2022-09-09T23:24:47.181Z","dependency_job_id":null,"html_url":"https://github.com/aloisdeniel/spaces","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aloisdeniel%2Fspaces","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aloisdeniel%2Fspaces/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aloisdeniel%2Fspaces/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aloisdeniel%2Fspaces/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aloisdeniel","download_url":"https://codeload.github.com/aloisdeniel/spaces/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221815310,"owners_count":16885160,"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","responsive","spacing","ui"],"created_at":"2024-10-11T22:43:13.052Z","updated_at":"2024-10-28T10:10:06.767Z","avatar_url":"https://github.com/aloisdeniel.png","language":"Dart","funding_links":["https://www.buymeacoffee.com/aloisdeniel"],"categories":[],"sub_categories":[],"readme":"![logo](https://github.com/aloisdeniel/spaces/raw/master/logo.png)\n\n# Spaces\n\n\u003cp\u003e\n  \u003ca href=\"https://pub.dartlang.org/packages/spaces\"\u003e\u003cimg src=\"https://img.shields.io/pub/v/spaces.svg\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.buymeacoffee.com/aloisdeniel\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/$-donate-ff69b4.svg?maxAge=2592000\u0026amp;style=flat\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nDefining global spacing constants for building consistent and responsive apps.\n\n## Install\n\nAdd the dependency to your `pubspec.yaml` :\n\n```yaml\ndependencies:\n    spaces: \u003cversion\u003e\n```\n\n## Quick start\n\n```dart\nreturn MaterialApp(\n    // Defining\n    builder: (context, child) =\u003e Spacing(\n        dataBuilder: (context) {\n          final mediaQuery = MediaQuery.of(context);\n          if (mediaQuery.size.width \u003e 500) {\n            return SpacingData.generate(30);\n          }\n          return SpacingData.generate(10);\n        },\n        child: child,\n    ),\n    home:Builder(builder: (context) {\n        // Using\n        final spacing = Spacing.of(context);\n        return SpacedColumn.normal(\n            padding: spacing.insets.all.semiBig,\n            children: \u003cWidget\u003e[\n                Text('hello'),\n                Space.big(),\n                Text('world'),\n            ],\n        );\n      })\n    ),\n)\n```\n\n# Usage\n\n## Configuring spacing \n\nA `Spacing` widget should declare a global spacing configuration for your application.\n\n```dart\nreturn MaterialApp(\n    builder: (context, child) =\u003e Spacing.fixed(\n        data: SpacingData.generate(10.0), // This generates a set of spacing constants for your apps, from a base space of `10.0`.\n        child: child,\n    ),\n    /// ...\n)\n```\n\n### Generate\n\nBy calling the `Spacing.generate` constructor, a set of constants are automatically generated from a single base value.\n\nThe generated values are :\n\n* **extraSmall** : `value * 0.2`\n* **small** : `value * 0.4`\n* **semiSmall** : `value * 0.6`\n* **normal** : `value`\n* **semiBig** : `value * 1.5`\n* **big** : `value * 2.5`\n* **extraBig** : `value * 5.0`\n\n```dart\nSpacingData.generate(10.0)\n```\n\n### From spaces\n\nIf you want to define the various spacing values, you can use the \n\n```dart\nSpacingData.fromSpaces(\n    extraSmall: 1.0,\n    small: 2.0,\n    semiSmall: 4.0,\n    normal: 8.0,\n    semiBig: 12.0,\n    big: 20.0,\n    extraBig: 100.0,\n)\n```\n\n## Responsive spacing\n\nYou can define the `dataBuilder` property of the `Spacing` constructor to generate a configuration from the given context.\n\n```dart\nSpacing(\n    dataBuilder: (context) {\n        final mediaQuery = MediaQuery.of(context);\n        return SpacingData.generate(mediaQuery.size.width \u003e 300.0 ? 20.0 : 10.0),\n    },\n    child: child,\n)\n```\n\n## Using constants\n\nTo access various spacing constants, simply use the `Spacing.of(context)` getter, or the `context.spacing()` extension method.\n\n```dart\nfinal spacing = Spacing.of(context);\n// spacing.spaces.semiBig\n```\n\n### Size variants\n\nThere are seven availables spacing constants : `extraSmall`, `small`, `semiSmall`, `normal`, `semiBig`, `big`, `extraBig`;\n\n```dart\nfinal spacing = Spacing.of(context);\nreturn SizedBox(\n    width: spacing.spaces.semiSmall,\n);\n```\n\n### Insets helpers\n\nYou have `EdgeInsets` presets available from `\u003cspacing\u003e.insets.\u003cselector\u003e.\u003csize\u003e`.\n\nThe available selectors are : `all`, `horizontal`, `vertical`, `onlyLeft`, `onlyTop`, `onlyRight`, `onlyBottom`, `exceptLeft`, `exceptRight`, `exceptTop`, `exceptBottom`.\n\n```dart\nfinal spacing = Spacing.of(context);\nreturn Padding(\n    padding: spacing.insets.exceptLeft.semiBig,\n    child: Text('Hello'),\n);\n```\n\n## Widgets\n\n### Space\n\nThe `Space` widget uses [gap](https://pub.dev/packages/gap) under the hood to define a space in a `Flex`, `Column`, `Row` or `Scrollable` (such as `ListView`).\n\n```dart\nreturn Column(\n    children: [\n        Text('hello'),\n        const Space.semiSmall(),\n        Text('world'),\n    ],\n);\n```\n\n### SpacedFlex / SpacedColumn / SpacedRow\n\nLike `Flex` / `Column` / `Row`, but with additional `padding` and `spaceBetween` properties.\n\n```dart\nfinal spacing = Spacing.of(context);\nreturn SpacedColumn.small(\n    padding: spacing.insets.all.normal,\n    children: [\n        Text('hello'),\n        Text('world'),\n    ],\n);\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faloisdeniel%2Fspaces","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faloisdeniel%2Fspaces","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faloisdeniel%2Fspaces/lists"}