{"id":25557236,"url":"https://github.com/lunaticpython2003/50-days-of-flutter","last_synced_at":"2026-02-24T01:30:14.275Z","repository":{"id":220003313,"uuid":"750293289","full_name":"LunaticPython2003/50-Days-of-Flutter","owner":"LunaticPython2003","description":"Repository detailing 50 days of my continuous path to expertise on Flutter","archived":false,"fork":false,"pushed_at":"2024-02-02T14:05:59.000Z","size":44,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-02-02T20:36:39.850Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LunaticPython2003.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2024-01-30T11:14:12.000Z","updated_at":"2024-02-02T20:36:39.851Z","dependencies_parsed_at":"2024-02-01T20:44:11.416Z","dependency_job_id":null,"html_url":"https://github.com/LunaticPython2003/50-Days-of-Flutter","commit_stats":null,"previous_names":["lunaticpython2003/50-days-of-flutter"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LunaticPython2003%2F50-Days-of-Flutter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LunaticPython2003%2F50-Days-of-Flutter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LunaticPython2003%2F50-Days-of-Flutter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LunaticPython2003%2F50-Days-of-Flutter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LunaticPython2003","download_url":"https://codeload.github.com/LunaticPython2003/50-Days-of-Flutter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239859545,"owners_count":19708862,"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":"2025-02-20T14:58:26.370Z","updated_at":"2026-02-24T01:30:14.235Z","avatar_url":"https://github.com/LunaticPython2003.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 50-Days-of-Flutter\n\nThe repository contains all the important concepts and codes that I used while learning Flutter. Each day has been marked by the appropriate heading, and link to the relevant codes -\n\n## Day 1\n\nDetails of the widgets that have been covered on this day -\n- \u003cu\u003e AppBar \u003c/u\u003e -\n  - title - Used for adding text (or images) to the navigation bar\n  - leading - The area preceeded by the title\n  - Color - Colors.colorname[integer]\n- \u003cu\u003e Decorations \u003c/u\u003e -  Used for adding specific decorations to a widget. Example\n```c++\ndecoration: BoxDecoration(\n                      color: Colors.deepPurple,\n                      borderRadius: BorderRadius.circular(20)),\n```\n\nThis adds deepPurple color and creates a rounded border of radius 20 along the sides of a Container widget.\n\n- \u003cu\u003e Child and children \u003c/u\u003e -\n  - Child - Used when only one widget is to be encapsulated within another. Widgets like Column, Center support only one child\n  - Children - Has the capacity to add multiple widgets inside another. \u003cbr\u003e\n  Example - Column\n\n- \u003cu\u003e Expanded \u003c/u\u003e - This widget is used to automatically allign the containers or other widgets to use all the available screen real estate. Example usage -\n```c++\nbody: Column(\n    children: [\n        Expanded(\n          flex: 2,\n          child: Container(\n            decoration: BoxDecoration(\n                color: Colors.green,\n                borderRadius: BorderRadius.circular(20)),\n            child: const Center(\n                child: Text(\n              \"Hello World\",\n              style: TextStyle(\n                color: Colors.white,\n                fontSize: 28,\n                fontWeight: FontWeight.bold,\n              ),\n            )),\n          ),\n        )\n      ],\n    );\n```\n\nSome important things to consider in here -\n- Multiple widgets can be encapsulated within the Column widget, like the Expanded widget(s) in here\n- flex property of Expanded lets us specify how much of area will an individual widget take. In this case, the Expanded child having flex 2 will have a height twice as much as the others\n\n\n## Day 2\nDetails of the widgets -\n- \u003cu\u003eListView\u003c/u\u003e\n  - Same as Column but swipeable so that screen overflow is avoided\n  - ```scrollDirection: Axis.horizontal``` of ListView creates a scrollable widget in the horizontal direction. \u003cbr\u003e \u003cbr\u003e\nRefer to \u003ca href=\"mainf/lib/day-2.dart\"\u003e this code \u003c/a\u003e\n\n- \u003cu\u003eListView.builder\u003c/u\u003e\n  - Building multiple widgets - \u003cbr\u003e\n    ```c++\n    body: ListView.builder(\n        itemCount: 10,\n        itemBuilder: (context, index) =\u003e ListTile(\n        title: Text(index.toString()),\n     ))\n     ```\n    - itemCount - Refers to the total widgets that can be placed\n    - itemBuilder - Method to build the widgets\n  \u003cbr\u003e Refer to \u003ca href=\"mainf/lib/day-2-builder.dart\"\u003e this code \u003c/a\u003e\n\n## Day 3\nDetails of the widgets used\n- \u003cu\u003eGridLayout.builder()\u003c/u\u003e\n  - Similar to ListView.builder()\n  - ```c++\n    GridView.builder(\n      itemCount: 64,\n      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(\n          crossAxisCount: 4),\n      itemBuilder: (context, index) =\u003e Container(\n            decoration: BoxDecoration(\n                color: Colors.deepPurple[200],\n                borderRadius: BorderRadius.circular(20)),\n            margin: const EdgeInsets.all(4),\n          ));\n     ```\n  - This code creates 64 containers with each row containing 4 containers.\n\n## Day 4\nDetails of the widgets used\n- \u003cu\u003eStack\u003c/u\u003e\n  - Works just like it says; stacks one element over the other in the screen.\n  - ```c++\n    body: Stack(alignment: Alignment.center, children: [\n      Container(\n        height: 400,\n        width: 400,\n        decoration: const BoxDecoration(\n          color: Colors.deepPurple,\n        ),\n      ),\n      Container(\n        height: 300,\n        width: 300,\n        decoration: BoxDecoration(color: Colors.deepPurple[200]),\n      ),\n      Container(\n        height: 200,\n        width: 200,\n        decoration: BoxDecoration(color: Colors.deepPurple[400]),\n      )\n    ]),\n    ```\n  - This renders 3 components, one on top of another with the subsequent boxes stacked on one another in the center. Refer to \u003ca href=\"mainf/lib/day-4-stack.dart\"\u003e this code \u003c/a\u003e\n\n- \u003cu\u003eGestureDetector\u003c/u\u003e\n  - Used to perform a action when the user interacts with a widget. Interaction could be of any type, such as clicking on the widget, long pressing, etc.\n  - The widget takes a child (which in this case, is a Container), and the interaction method (onTap in this case). Refer to \u003ca href=\"mainf/lib/day-4-gesture.dart\"\u003e this code \u003c/a\u003e\n\n## Day 4\nFlutter Navigation\n- The endpoints for the pages to route to, have to be defined in the routes section of MaterialApp().\n- After the routes are mapped to the corresponding functions, they can be navigated to using `Navigator.pushNamed`\n- Consider the example -\n ```c++\n    body: Center(\n      child: ElevatedButton(\n      child: const Text(\n        \"Go to Page 1\",\n        textAlign: TextAlign.center,\n      ),\n      onPressed: () =\u003e Navigator.pushNamed(context, '/firstpage'),\n    )),\n  ```\n  Here, when the button is pressed, the app moves to the /firstpage endpoint, which has been mapped in the routes section of the MaterialApp. Refer to \u003ca href=\"mainf/lib/day-5-navigation.dart\"\u003e this code \u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flunaticpython2003%2F50-days-of-flutter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flunaticpython2003%2F50-days-of-flutter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flunaticpython2003%2F50-days-of-flutter/lists"}