{"id":16369544,"url":"https://github.com/chomosuke/flex_with_main_child","last_synced_at":"2025-07-15T07:11:36.901Z","repository":{"id":45212398,"uuid":"432862353","full_name":"chomosuke/flex_with_main_child","owner":"chomosuke","description":"A Flutter Flex that tries to have the same cross axis size as its mainChild","archived":false,"fork":false,"pushed_at":"2023-01-09T04:29:09.000Z","size":78,"stargazers_count":5,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-14T03:57:36.088Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chomosuke.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":"2021-11-29T00:48:53.000Z","updated_at":"2024-07-27T20:17:18.000Z","dependencies_parsed_at":"2023-02-08T08:46:38.666Z","dependency_job_id":null,"html_url":"https://github.com/chomosuke/flex_with_main_child","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/chomosuke/flex_with_main_child","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chomosuke%2Fflex_with_main_child","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chomosuke%2Fflex_with_main_child/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chomosuke%2Fflex_with_main_child/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chomosuke%2Fflex_with_main_child/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chomosuke","download_url":"https://codeload.github.com/chomosuke/flex_with_main_child/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chomosuke%2Fflex_with_main_child/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265416722,"owners_count":23761455,"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-11T02:55:36.543Z","updated_at":"2025-07-15T07:11:36.867Z","avatar_url":"https://github.com/chomosuke.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- \nThis README describes the package. If you publish this package to pub.dev,\nthis README's contents appear on the landing page for your package.\n\nFor information about how to write a good package README, see the guide for\n[writing package pages](https://dart.dev/guides/libraries/writing-package-pages). \n\nFor general information about developing packages, see the Dart guide for\n[creating packages](https://dart.dev/guides/libraries/create-library-packages)\nand the Flutter guide for\n[developing packages and plugins](https://flutter.dev/developing-packages). \n--\u003e\n\nA Flex (i.e. Column or Row) that sizes itself to its main child in the cross axis direction.\n\n## Features\n\nThis package contains three classes:\n - `FlexWithMainChild`\n - `ColumnWithMainChild`\n - `RowWithMainChild`\n\n## Getting started\n\nAdd `flex_with_main_child: \u003cversion\u003e` under `dependencies` in your `pubspec.yaml`.\n\n## How it works\n\nAfter it renders, it checks if the crossAxisSize of the flex is the same as the size obtain from `mainChildKey`. If not, it'll render again with the crossAxisSize set to the size previously measured from `mainChildKey`. It'll keep re-rendering until the size matches.\n\n## Usage\n\nThe 3 classes' usage are exactly identical to their counterparts in flutter/widgets.dart, except they take in a mainChildKey which they will use to match their cross axis size to.\n\n### Example\n\n```dart\nWidget build(BuildContext context) {\n  final mainChildKey = GlobalKey();\n\n  return ColumnWithMainChild(\n    // ColumnWithMainChild have the same parameters as Column\n    mainAxisAlignment: MainAxisAlignment.center,\n    // except children, obviously.\n    children: [\n      // Because the underlying implementation uses Flex, any child that work\n      // in Column will work exactly the same way in ColumnWithMainChild.\n      Spacer(flex: 5),\n      Text('very very very very long description'),\n      Spacer(),\n      Text(\n        'short Title',\n        key: mainChildKey, // you have to give mainChildKey to the main child\n      ),\n      Spacer(),\n      Text('another very very very very very long text'),\n      Spacer(flex: 10),\n    ],\n    mainChildKey: mainChildKey,\n  );\n}\n```\n\nThe above code will give:\n![example](https://raw.githubusercontent.com/chomosuke/flex_with_main_child/master/example.png)\n\n## Additional information\n\nNote that SizedBox will sometimes be forced to fit parent (e.g. when the parent is the screen). When this happens, place the FlexWithMainChild into a Center or some other intermediate containers. \n\n## Contribution \u0026 bug report\n\nAll pull requests / issues are welcome.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchomosuke%2Fflex_with_main_child","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchomosuke%2Fflex_with_main_child","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchomosuke%2Fflex_with_main_child/lists"}