{"id":24987369,"url":"https://github.com/helloharendra/flutter_roadmap","last_synced_at":"2025-04-19T18:04:23.780Z","repository":{"id":165914875,"uuid":"603987984","full_name":"helloharendra/Flutter_RoadMap","owner":"helloharendra","description":null,"archived":false,"fork":false,"pushed_at":"2023-02-24T10:46:48.000Z","size":62,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-04T11:44:20.430Z","etag":null,"topics":["dart","dart-programming","flutter","flutter-app","flutter-road","flutter-roadmap","flutter-ui","harendra-prajapati","helloharendra","hybrid","hybrid-application","hybrid-apps","ios","ios-app","ios-application","website","website-design","website-development"],"latest_commit_sha":null,"homepage":"","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/helloharendra.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,"publiccode":null,"codemeta":null}},"created_at":"2023-02-20T04:57:40.000Z","updated_at":"2024-10-03T16:14:47.000Z","dependencies_parsed_at":null,"dependency_job_id":"0c200fe3-3bff-4d91-935a-e6b6f29bde82","html_url":"https://github.com/helloharendra/Flutter_RoadMap","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/helloharendra%2FFlutter_RoadMap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/helloharendra%2FFlutter_RoadMap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/helloharendra%2FFlutter_RoadMap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/helloharendra%2FFlutter_RoadMap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/helloharendra","download_url":"https://codeload.github.com/helloharendra/Flutter_RoadMap/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246174604,"owners_count":20735417,"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":["dart","dart-programming","flutter","flutter-app","flutter-road","flutter-roadmap","flutter-ui","harendra-prajapati","helloharendra","hybrid","hybrid-application","hybrid-apps","ios","ios-app","ios-application","website","website-design","website-development"],"created_at":"2025-02-04T11:37:57.585Z","updated_at":"2025-03-29T11:12:24.967Z","avatar_url":"https://github.com/helloharendra.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Flutter RoadMap\n\n-  Widget.\n-  Layout.\n-  Material Design.\n-  Cupertino Design.\n-  State Management.\n-  Typography.\n-  Image and Asset.\n-  Forms and Input.\n-  Error Handling.\n-  Debugging Technique.\n-  Flutter DevTool.\n-  Dart Observatory.\n\n## Flutter Widgets.\u003cbr\u003e\nWhenever we are going to code for building anything in Flutter, it will be inside a widget.\u003cbr\u003e\n\nTypes of Widget:\u003cbr\u003e\nBasically there are two types of Widgets.\u003cbr\u003e\n\n1.StatelessWidget:\u003cbr\u003e\nIt remains static throughout its lifecycle.Ex. Text, Row, Column, Container, etc.\u003cbr\u003e\n\n2.StatefulWidget:\u003cbr\u003e\n\nDynamic, it can change the inner data during the widget lifetime. This widget does not have a build() method. It has a createState() method.\u003cbr\u003e\nEx. Checkbox, Radio, Slider, InkWell, Form, and TextField.\u003cbr\u003e\n\nCreate your first Flutter app with vs code\u003cbr\u003e\n\nStep 1. open vs code and press shift+command+p on windows press shift+ctrl+p.\u003cbr\u003e\nIf you press the above command your interface looks like this.\u003cbr\u003e\n\n![Screenshot 2023-02-21 at 12 07 14 PM](https://user-images.githubusercontent.com/78723011/220299112-866c2b39-7758-46d8-8b4b-0c061af61875.png)\n\nStep 2. Select Flutter: New Project.\u003cbr\u003e\n![Screenshot 2023-02-21 at 12 07 14 PM](https://user-images.githubusercontent.com/78723011/220299261-e641f4f5-2e6d-4143-99b0-740311cfbb47.png)\n\nStep 3.  select Application.\u003cbr\u003e\n\n![Screenshot 2023-02-21 at 12 07 20 PM](https://user-images.githubusercontent.com/78723011/220300096-1fdb5042-40ba-4e0c-a4c5-135985e41ffb.png)\nStep  4. select the directory/folder where you want to create your project. \u003cbr\u003e\n\n![Screenshot 2023-02-21 at 12 07 24 PM](https://user-images.githubusercontent.com/78723011/220299866-4e75874b-ebf0-43aa-b28b-f3e938f4cad8.png)\n\nStep 5.  Enter Your Project Name .\u003cbr\u003e\n \n![Screenshot 2023-02-21 at 12 08 16 PM](https://user-images.githubusercontent.com/78723011/220299682-8a0368e1-dfbd-4a0f-b9a0-ff157326cc82.png)\nError: If you are getting errors like this Don’t worry, Enter your project name in small Letter only.\u003cbr\u003e\nYour error will be fired .\u003cbr\u003e\n\n![Screenshot 2023-02-21 at 12 08 12 PM](https://user-images.githubusercontent.com/78723011/220302015-77ed1520-c763-4f08-9b3a-3b6f1e05ec87.png)\n\nStep 6.  Press Enter\u003cbr\u003e\u003cbr\u003e\nHahhah…… your first project is created.\u003cbr\u003e\n\n![Screenshot 2023-02-21 at 12 08 16 PM](https://user-images.githubusercontent.com/78723011/220302247-c5f0e00c-7380-42e8-854f-c6fb72753b46.png)\n\nGo to the lib/main.dart , your first project Looks like this.\u003cbr\u003e\n![Screenshot 2023-02-21 at 2 59 01 PM](https://user-images.githubusercontent.com/78723011/220304857-4833cac5-bd6c-4ae1-82c3-c707588219e5.png)\nRun : To run this project click on start debugging button.\u003cbr\u003e\n\n![Screenshot 2023-02-21 at 12 37 44 PM](https://user-images.githubusercontent.com/78723011/220302723-a632021d-52a4-4a05-bd8e-ad4276d8dad7.png)\n\n\n1.Visible widgets:\u003cbr\u003e\n All output and Input are visible widgets.\u003cbr\u003e\n1. Text : text widget used to show the text . \u003cbr\u003e\n\n\n\n![Screenshot 2023-02-21 at 1 05 10 PM](https://user-images.githubusercontent.com/78723011/220302926-7aa53d83-1e16-489c-bc7a-72fd91e93b76.png)\n\nOutput\u003cbr\u003e\n\n![Screenshot 2023-02-21 at 1 05 46 PM](https://user-images.githubusercontent.com/78723011/220303056-86d5d550-430e-4899-a763-112ead609b07.png)\n\n\nNote: If you want to run your Project on IOS simulator/we/other device following steps are for you.\u003cbr\u003e\nStep 1.\u003cbr\u003e\n![Screenshot 2023-02-21 at 1 13 19 PM](https://user-images.githubusercontent.com/78723011/220303140-a261dce5-0fdd-4e6d-9517-639d5bad06b8.png)\n\nStep 2.  Select IOS Simulator\u003cbr\u003e\n\n![Screenshot 2023-02-21 at 1 20 33 PM](https://user-images.githubusercontent.com/78723011/220303217-a3102828-a226-482c-b167-1d5efffc2656.png)\n\nFinally the simulator will appear on your screen, and your interface looks like this.\u003cbr\u003e\n\n![Screenshot 2023-02-21 at 1 22 50 PM](https://user-images.githubusercontent.com/78723011/220303290-f28faa22-036e-4417-b8e8-90ed09b1feed.png)\n\nThen run your project by click\t on start debugging Button.\u003cbr\u003e\n\n![Simulator Screen Shot - iPhone 14 Pro - 2023-02-21 at 13 25 48](https://user-images.githubusercontent.com/78723011/220303357-c2cf957c-ed3d-4116-8b48-09ddc132fa79.png)\n\nNow let's remove the error from your code.\u003cbr\u003e\n\nStep 1. Go to the warning section ,hover will appear . click on Quick Fix.\u003cbr\u003e\n![Screenshot 2023-02-21 at 1 33 46 PM](https://user-images.githubusercontent.com/78723011/220303522-3433c9b6-4663-4288-a5d5-087d9decadb7.png)\n\nStep 2. Click on Add const modifier.\u003cbr\u003e\n\n![Screenshot 2023-02-21 at 1 34 02 PM](https://user-images.githubusercontent.com/78723011/220303577-73b0fc97-c4ad-4dc2-83c2-074343158e3f.png)\n2.FloatingActionButton.\u003cbr\u003e\n\n![Screenshot 2023-02-21 at 4 00 33 PM](https://user-images.githubusercontent.com/78723011/220349423-03ba53d5-7630-47c5-9cb4-f0c6b6d141c6.png)\n\n![Simulator Screen Shot - iPhone 14 Pro - 2023-02-21 at 16 09 25](https://user-images.githubusercontent.com/78723011/220349614-f644c8d8-bf68-4132-98b7-6b9a0b8ab91b.png)\n3. Elevated Button.\u003cbr\u003e\n\n![Screenshot 2023-02-21 at 5 30 10 PM](https://user-images.githubusercontent.com/78723011/220350066-a28171f7-4a3b-4b66-bc4a-50f6cf4d7282.png)\n![Simulator Screen Shot - iPhone 14 Pro - 2023-02-21 at 16 09 25](https://user-images.githubusercontent.com/78723011/220350231-faba4b1d-ff84-4e05-93a7-ceee4ea6f76f.png)\n3.IconButton.\u003cbr\u003e\n![Screenshot 2023-02-21 at 4 49 44 PM](https://user-images.githubusercontent.com/78723011/220350617-5c4bb1ca-5268-4fe4-8ec4-3ab312aecfb3.png)\n\n![Simulator Screen Shot - iPhone 14 Pro - 2023-02-21 at 16 49 52](https://user-images.githubusercontent.com/78723011/220350775-05901a8c-8141-44d1-bbfc-3d67ea29aaa2.png)\n\n4.AppBar.\u003cbr\u003e\n\n![Screenshot 2023-02-21 at 4 56 28 PM](https://user-images.githubusercontent.com/78723011/220351082-6058e9e9-3932-46f3-89c0-ebf43cd39d5c.png)\n\n![Simulator Screen Shot - iPhone 14 Pro - 2023-02-21 at 16 49 52](https://user-images.githubusercontent.com/78723011/220351127-0fc47e26-6023-4647-a821-f5f518ddb6aa.png)\n6. Image. \u003cbr\u003e\n![Screenshot 2023-02-21 at 5 11 33 PM](https://user-images.githubusercontent.com/78723011/220351310-7ff921cd-d62a-4135-93e5-2a217724b84f.png)\n\n![Simulator Screen Shot - iPhone 14 Pro - 2023-02-21 at 17 11 44](https://user-images.githubusercontent.com/78723011/220351429-9d36f833-a9ae-4e79-a9e3-0833e86f732a.png)\n\n7.Icon\u003cbr\u003e \n\n![Screenshot 2023-02-21 at 5 01 27 PM](https://user-images.githubusercontent.com/78723011/220352224-7897345e-1d2b-4a68-be71-cb1a0bfe4dfd.png)\n\n![Simulator Screen Shot - iPhone 14 Pro - 2023-02-21 at 16 49 52](https://user-images.githubusercontent.com/78723011/220352290-3881826a-ca5c-4fda-9dbc-f73e64e07e9a.png)\n# 2.Invisible widgets:\u003cbr\u003e\nAll  Layout and Control are Invisible widgets.\n1.Column. (It provides spacing between the widgets by using the mainAxisAlignment and crossAxisAlignment properties.)\u003cbr\u003e\n2. Row.\u003cbr\u003e\n\n![Screenshot 2023-02-21 at 5 47 43 PM](https://user-images.githubusercontent.com/78723011/220353044-54c6482d-b9ce-4026-bca4-69cf76e9eaa2.png)\n![Simulator Screen Shot - iPhone 14 Pro - 2023-02-21 at 17 47 54](https://user-images.githubusercontent.com/78723011/220353062-6dfada8f-c3ba-4a96-879d-56571e06681d.png)\n3. Center.\u003cbr\u003e\n\n\n4. Padding.\u003cbr\u003e\n![Screenshot 2023-02-21 at 5 30 10 PM](https://user-images.githubusercontent.com/78723011/220353313-4bc340a4-91e6-4eef-973c-8dc6227cfea8.png)\n\n![Simulator Screen Shot - iPhone 14 Pro - 2023-02-21 at 17 30 20](https://user-images.githubusercontent.com/78723011/220353419-94b3df66-b5b3-44cf-83cc-5d1da5f9389d.png)\n\n5. Scaffold.(This widget provides a framework that allows you to add common material design/in-built/prepared/  elements like AppBar, Floating Action Buttons, Drawers, etc.)\u003cbr\u003e\n![Screenshot 2023-02-21 at 6 12 43 PM](https://user-images.githubusercontent.com/78723011/220353632-87f1f796-d584-4a0f-88ef-623c9a5c4ef0.png)\n![Simulator Screen Shot - iPhone 14 Pro - 2023-02-21 at 18 12 52](https://user-images.githubusercontent.com/78723011/220353792-dd91e5c1-d23f-4f3f-a2f9-c1111115d879.png)\n\n\n\n\n![Screenshot 2023-02-24 at 4 16 16 PM](https://user-images.githubusercontent.com/78723011/221159923-d9d0d9a0-1873-4a68-96db-1bb277c654d3.png)\n\n\n\n\n\n\nImage. \u003cbr\u003e\nIcon etc.\u003cbr\u003e\n\n2.Invisible widgets:\u003cbr\u003e\nAll  Layout and Control are Invisible widgets.\u003cbr\u003e\nColumn. (It provides spacing between the widgets by using the mainAxisAlignment and crossAxisAlignment properties.)\u003cbr\u003e\nRow.\u003cbr\u003e\nCenter.\u003cbr\u003e\nPadding.\u003cbr\u003e\nStack(overlapping)\u003cbr\u003e.\nScaffold.(This widget provides a framework that allows you to add common material design/in-built/prepared/  elements like AppBar, Floating Action \u003cbr\u003eButtons, Drawers, etc.)\u003cbr\u003e\n\nFlutter Layouts :\u003cbr\u003e\n\nLayout models are widgets,Steps to create a Layout.\u003cbr\u003e\nStep 1: First, we need to select a Layout widget.\u003cbr\u003e\nStep 2: Next, create a visible widget.\u003cbr\u003e\nStep 3: Then, add the visible widget to the layout widget.\u003cbr\u003e\nStep 4: Finally, add the layout widget to the page where you want to display.\u003cbr\u003e\n\n\n\n\nType of layout widgets:\u003cbr\u003e\n\n1.Single Child  Widget: \u003cbr\u003e\nIt contains only one child widget inside the parent layout widget. It can save us time.Some single child widgets are: \u003cbr\u003eContainer,Padding,Center,Align,SizedBox, AspectRatio,\u003cbr\u003e\n\n Baseline?,ConstrainedBox?,CustomSingle-ChildLayout?.\u003cbr\u003e\n\n2. Multi child Layout:\u003cbr\u003e\nIt contains more than one child widget inside the parent widget with unique Layouts. Ex. Row, Column, ListView, GridView, Expanded, Table, Flow, Stack.\u003cbr\u003e\n\nMaterial Design:\u003cbr\u003e\nOpen - source design system, designed by google designers and developers.Help developers to build High Quality, Faster, rich user interface design.\u003cbr\u003e\n\nMaterialApp (required for applications implementing Material Design).\u003cbr\u003e\nScaffold (This class provides APIs for showing drawers, snack bars, and bottom sheets.)\u003cbr\u003e\nSliverAppBar (integrates with a CustomScrollView.)\u003cbr\u003e\nAppBar\u003cbr\u003e\nBottomNavigationBar\u003cbr\u003e\nElevatedButton\u003cbr\u003e\nFloatingActionButton\u003cbr\u003e\nIconButton\u003cbr\u003e\nCheckbox\u003cbr\u003e\nRadio\u003cbr\u003e\nSlider\u003cbr\u003e\nSwitch\u003cbr\u003e\nTextField\u003cbr\u003e\nAlertDialog\u003cbr\u003e\nIcon\u003cbr\u003e\nListTile\u003cbr\u003e\n\nDrawer (A Material Design panel that slides in horizontally from the edge of a Scaffold to show navigation links in an application).\u003cbr\u003e\n\nCupertino Design:\u003cbr\u003e\nIf we want to design any specific app, For standard an IOS device, Then Prefer Cupertino Design.\u003cbr\u003e\nAlso we can run cupertino apps on android but some fonts don’t support it on android.\u003cbr\u003e\n\nCupertino (IOS-Style) Design:\u003cbr\u003e\n\u003cbr\u003e\nCupertinoActionSheet\u003cbr\u003e\nCupertinoActivityIndicator\u003cbr\u003e\nCupertinoAlertDialog\u003cbr\u003e\nCupertinoButton\u003cbr\u003e\nCupertinoContextMenu\u003cbr\u003e\nCupertinoDatePicker\u003cbr\u003e\nCupertinoDialogAction\u003cbr\u003e\nCupertinoNavigationBar(Top Navigation Bar)\u003cbr\u003e\nCupertinoTabBar (Bottom Tab Bar)\u003cbr\u003e\n\n\n\n\n\n\n# Flutter Widgets.\u003cbr\u003e\n Whenever you are going to code for building anything in Flutter, it will be inside a widget.\u003cbr\u003e\n\n### Types of Widget\u003cbr\u003e\n\n#### In Flutter, there are mainly two types of widget:\u003cbr\u003e\n\n- StatelessWidget\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\nIt remains static throughout its lifecycle.\u003cbr\u003e\nEx. Text, Row, Column, Container, etc.\n\n- StatefulWidget\u003cbr\u003e\n\n It is dynamic because it can change the inner data during the widget lifetime.\u003cbr\u003e\n This widget does not have a build() method. It has createState() method,\u003cbr\u003e\n Ex. Checkbox, Radio, Slider, InkWell, Form, and TextField.\n\n### 1.Visible (Output and Input)\u003cbr\u003e\n- Text\u003cbr\u003e\n- FlatButton\u003cbr\u003e\n- RaisedButton\u003cbr\u003e\n- Image \u003cbr\u003e\n- Icon etc.\u003cbr\u003e\n### 2.Invisible (Layout and Control)\u003cbr\u003e\n- Column( It provides spacing between the widgets by using the mainAxisAlignment and crossAxisAlignment properties.)\u003cbr\u003e\n- Row\u003cbr\u003e\n- Center\n- Padding\u003cbr\u003e\n- Stack(overlapping)\u003cbr\u003e\n- Scaffold(This widget provides a framework that allows you to add common material design elements like AppBar, Floating Action Buttons, Drawers, etc.\n)\u003cbr\u003e\n\n# Flutter Layouts \u003cbr\u003e\nlayout models are widgets.\n#### steps to create a Layout.\u003cbr\u003e\nStep 1: First, you need to select a Layout widget.\u003cbr\u003e\nStep 2: Next, create a visible widget.\u003cbr\u003e\nStep 3: Then, add the visible widget to the layout widget.\u003cbr\u003e\nStep 4: Finally, add the layout widget to the page where you want to display.\u003cbr\u003e\n### Single Child Widget (only one child widget inside the parent layout widget, it can save our time and makes the app code more readable.)\u003cbr\u003e\n- Container\n- Padding\n- Center\n- Align\n- SizedBox\n- AspectRatio\n- Baseline\n- ConstrainedBox\n- CustomSingleChildLayout\n### 2. Multi child Layout:\u003cbr\u003e\nIt contains more than one child widget inside the parent widget with unique Layouts.\nEx. Row,Column,ListView,GridView,Expanded,Table,Flow,Stack.)\u003cbr\u003e \n ### Material Design:\u003cbr\u003e\nOpen-source design system designed by google designers and developers.Help developers to build High Quality, Faster, rich user interface design.\u003cbr\u003e\nMaterial Design:\nOpen - source design system designed by google designers and developers.Help developers to build High Quality, Faster, rich user interface design.\nMaterialApp (required for applications implementing Material Design).\nScaffold (This class provides APIs for showing drawers, snack bars, and bottom sheets.)\nSliverAppBar (integrates with a CustomScrollView.)\nAppBar\nBottomNavigationBar\nElevatedButton\nFloatingActionButton\nIconButton\nCheckbox\nRadio\nSlider\nSwitch\nTextField\nAlertDialog\nIcon\nListTile\nDrawer (A Material Design panel that slides in horizontally from the edge of a Scaffold to show navigation links in an application).\nCupertino Design:\nIf we want to design any specific app, For standard an IOS device, Then Prefer Cupertino Design.\nAlso we can run cupertino apps on android but some fonts don’t support it on android.\nCupertino (IOS-Style) Design:\n\nCupertinoActionSheet\nCupertinoActivityIndicator\nCupertinoAlertDialog\nCupertinoButton\nCupertinoContextMenu\nCupertinoDatePicker\nCupertinoDialogAction\nCupertinoNavigationBar(Top Navigation Bar)\nCupertinoTabBar (Bottom Tab Bar)\n\n\n\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhelloharendra%2Fflutter_roadmap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhelloharendra%2Fflutter_roadmap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhelloharendra%2Fflutter_roadmap/lists"}