{"id":18207479,"url":"https://github.com/devanshsadhya/flutter_basics","last_synced_at":"2026-05-06T04:06:41.414Z","repository":{"id":258993115,"uuid":"875248119","full_name":"DevanshSadhya/Flutter_Basics","owner":"DevanshSadhya","description":"Flutter Basics to Advance series","archived":false,"fork":false,"pushed_at":"2024-11-22T08:26:27.000Z","size":537,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-07T19:52:36.115Z","etag":null,"topics":["android-studio","androistudio","dart","dart-lang","firebase","firebase-database","flutter","flutter-demo","full-stack"],"latest_commit_sha":null,"homepage":"","language":"C++","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/DevanshSadhya.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2024-10-19T13:34:07.000Z","updated_at":"2025-01-02T09:19:47.000Z","dependencies_parsed_at":"2024-11-22T09:21:52.769Z","dependency_job_id":null,"html_url":"https://github.com/DevanshSadhya/Flutter_Basics","commit_stats":{"total_commits":41,"total_committers":1,"mean_commits":41.0,"dds":0.0,"last_synced_commit":"20b42ef1802284e34dce8461df0ca009da1c9d56"},"previous_names":["devanshsadhya/flutter_basics"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevanshSadhya%2FFlutter_Basics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevanshSadhya%2FFlutter_Basics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevanshSadhya%2FFlutter_Basics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevanshSadhya%2FFlutter_Basics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DevanshSadhya","download_url":"https://codeload.github.com/DevanshSadhya/Flutter_Basics/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247721928,"owners_count":20985083,"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":["android-studio","androistudio","dart","dart-lang","firebase","firebase-database","flutter","flutter-demo","full-stack"],"created_at":"2024-11-03T13:03:08.469Z","updated_at":"2026-05-06T04:06:41.403Z","avatar_url":"https://github.com/DevanshSadhya.png","language":"C++","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Flutter Basics\n\nA Flutter Project for guiding 30 widgets\n\n\n\n## Getting Started\n\nThis project is a starting point for a Flutter application.\n\nA few resources to get you started if this is your first Flutter project:\n\n[Lab: Write your first Flutter app](https://docs.flutter.dev/get-started/codelab)\n\n[Cookbook: Useful Flutter samples](https://docs.flutter.dev/cookbook)\n\nFor help getting started with Flutter, view our [online documentation](https://docs.flutter.dev/), which offers tutorials, samples, guidance on mobile development, and a full API reference.\n## Installation\n\nInstall Flutter with cmd\n\nI think you all finally install Flutter sdk tools and Android Studio\n\nSo lets start installing flutter and create our first project namely \"my_first_app\"\n\nlets get started -\n\n- ## Flutter doctor command in CMD\n\n```bash\nflutter doctor\nDoctor summary (to see all details, run flutter doctor -v):\n[√] Flutter (Channel stable, 3.24.3, on Microsoft Windows [Version 10.0.26100.2033], locale en-IN)\n[√] Windows Version (Installed version of Windows is version 10 or higher)\n[√] Android toolchain - develop for Android devices (Android SDK version 35.0.0)\n[√] Chrome - develop for the web\n[X] Visual Studio - develop Windows apps\n    X Visual Studio not installed; this is necessary to develop Windows apps.\n      Download at https://visualstudio.microsoft.com/downloads/.\n      Please install the \"Desktop development with C++\" workload, including all of its default components\n[√] Android Studio (version 2024.2)\n[√] Connected device (4 available)\n[√] Network resources\n\n! Doctor found issues in 1 category.\n```\n\n- ## flutter create my_first_app in cmd ##\n\nTo Create an app using cmd,follow these steps:-\n- Create an Empty folder and rename it as \"flutter projects\"\n- right click on empty folder and click on \"open in terminal\"\n\n![Open terminal in any folder](https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExb3ljZjJzcXd6a3IyeHFsbTJxY2p1M3podTFoNjRyend1Nzl0eWk0MCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/qPWW6wnIsyuXCevvyN/giphy.gif)\n- open terminal\n- write \"flutter create my_first_app\" in terminal and press enter\n\n```bash\n flutter create my_first_app\n```    \n```bash\nflutter create my_first_app\nCreating project my_first_app...\nResolving dependencies in `my_first_app`... (1.3s)\nDownloading packages...\nGot dependencies in `my_first_app`.\nWrote 129 files.\n\nAll done!\nYou can find general documentation for Flutter at: https://docs.flutter.dev/\nDetailed API documentation is available at: https://api.flutter.dev/\nIf you prefer video documentation, consider: https://www.youtube.com/c/flutterdev\n\nIn order to run your application, type:\n\n  $ cd my_first_app\n  $ flutter run\n\nYour application code is in my_first_app\\lib\\main.dart.\n```\n- YOUR FLUTTER application IS READY\n\n\n## Rows and Columns \n![Rows and Columns](https://miro.medium.com/v2/resize:fit:1062/1*3fFhf0jp9KfulswqM4HbRA.png)\n## Widgets\n\n- ## (1) SizedBox\nIt does not contain colour attributes\n```dart\nbody:Center(\n        child: SizedBox(\n          height: 650,\n          width: 650,\n          child: Center(child: Text('This is sized Box ')),\n        ),\n      ) ,\n```\n- ## (2) Container Widgets \nIt contain Multiple Paramaters such as color,child,height,width,decorations,etc\n\n```dart\nbody: Center(\n        child: Container(\n          height: 250,\n          width: 250,\n          decoration: BoxDecoration(\n            color: Colors.blue,\n            shape: BoxShape.circle,\n          ),\n          child: Center(child: Text('This is Container',style: TextStyle(fontSize: 30),)),\n          // child: Center(child: Text('This is Container',style: TextStyle(\n          //   fontSize: 30,\n          //   color: Colors.yellowAccent,\n          // ),)),\n          // color: Colors.blue,\n        ),\n      ),\n```\n- ## (3) Declaring two variables for MediaQueries for height and width of a mobile:-\n\n```dart\n@override\n  Widget build(BuildContext context) {\n\n    //defining two media quaries for width and height of the mobile\n    var w=MediaQuery.of(context).size.width;\n    var h=MediaQuery.of(context).size.height;\n```\nthis should be written inside @override----context functions\n\n- ## (4) Rows Widgets:-\n```dart\nbody: Container(\n        height: h,\n        width: w,\n        color: Colors.yellowAccent,\n        child: Row(\n          // mainAxisAlignment: MainAxisAlignment.center,  //Centering every Containers in a Row\n          mainAxisAlignment: MainAxisAlignment.spaceEvenly, //GIVING SPACES BETWEEN EACH CONTAINER WITH MARGINS\n          crossAxisAlignment: CrossAxisAlignment.stretch, //stretching each container with mobile height and width \n          children: [\n            //Container 1\n            Container(\n              height: 60,\n              width: 60,\n              color: Colors.red,\n            ),\n            //Container 2\n            Container(\n              height: 60,\n              width: 60,\n              color: Colors.blue,\n            ),\n            //Container 3\n            Container(\n              height: 60,\n              width: 60,\n              color: Colors.green,\n            ),\n            //Container 4\n            Container(\n              height: 60,\n              width: 60,\n              color: Colors.black,\n            ),\n            //Container 5\n            Container(\n              height: 60,\n              width: 60,\n              color: Colors.pinkAccent,\n            ),\n            //Container 6\n            Container(\n              height: 60,\n              width: 60,\n              color: Colors.grey,\n            ),\n          ],\n        ),\n      ),\n```\n\n- ## (6) Column Widgets:-\n```dart\nbody: Container(\n        height: h,\n        width: w,\n        color: Colors.pinkAccent,\n        child: Column(\n          mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n          crossAxisAlignment: CrossAxisAlignment.stretch,\n          children: [\n            //Container 1 of coloumn widgets\n            Container(\n              height: 60,\n              width: 60,\n              color: Colors.purpleAccent,\n            ),\n            //Container 2 of column widgets\n            Container(\n              height: 60,\n              width: 60,\n              color: Colors.blue,\n            ),\n            //container 3 of coloumn widgets\n            Container(\n              height: 60,\n              width: 60,\n              color: Colors.yellowAccent,\n            ),\n            //Container 4 of column widgets\n            Container(\n              height: 60,\n              width: 60,\n              color: Colors.orangeAccent,\n            )\n          ],\n        ),\n      ),\n```\n- ## (7) BUttons Widgets:-\nHere in this section we will explore two different types of buttons that we have in our buttons widgets line by line.\n\nlets get started:-\n\n- ## 7(a) TextButton Widget\n```dart\n body: Column(\n        mainAxisAlignment: MainAxisAlignment.center,\n        children: [\n          Center(\n\n            // TextButtons\n\n            child: TextButton(\n              onPressed: (){\n                print(\"TextButton\"); //printing the output in the console\n              },\n              child: Text(\"Press Me\",style: TextStyle(\n                fontSize: 25,\n                color: Colors.black\n              ),),\n              style: ButtonStyle(\n                // padding: WidgetStatePropertyAll(EdgeInsets.all(50)),\n                overlayColor: WidgetStatePropertyAll(Colors.red),\n                backgroundColor: WidgetStatePropertyAll(Colors.yellow)\n              ),\n            ),\n          ),\n\n``` \n- ## 7(b) ElevatedButton Widget\n```dart\n //Elevated Buttons\n\n          Container(\n            // height: 70,\n            // width: 200,\n            child: ElevatedButton(\n              style: ButtonStyle(\n                backgroundColor: WidgetStatePropertyAll(Colors.red),\n                overlayColor: WidgetStatePropertyAll(Colors.blue),\n              ),\n              onPressed: (){\n                print(\"Elevated Button\"); //printing the output in console\n              },\n              child: Text(\"Elevated Buttons\",style: TextStyle(\n                fontSize: 25,\n                color: Colors.yellow,\n\n              ),),\n            ),\n          )\n```\n- ## creating a list and Map for storing values for a listView.builder\n```dart\n//creating a function for a listView when we dont know the exact length of a cards to be drawn\n  List\u003cString\u003e fruits=[\"Oranges\",\"Mangoes\",\"Apples\",\"banana\"];\n  Map fruits_person={\n    \"fruits\":[\"Oranges\",\"Mangoes\",\"Apples\",\"banana\"],\n    \"names\": [\"Devansh\",\"Subhansh\",\"Shivansh\",\"asif\"]\n  };\n```\nP.S :- this should be written under the statefull widget between the \"context functions\" and \"override\"\n\n- ## ListView Widget\n```dart\nbody: Container(\n        child: ListView.builder(\n          itemCount: fruits.length,\n          itemBuilder: (context, index) {\n            return Card(\n              child: ListTile(\n                onTap: (){\n                  print(fruits_person[\"fruits\"][index]);\n                  print(fruits_person[\"names\"][index]);\n                },\n                leading: Icon(Icons.person),\n                title: Text(fruits_person[\"fruits\"][index]),\n                subtitle: Text(fruits_person[\"names\"][index]),\n              ),\n            );\n          },\n        ),\n      ),\n```\n- ## GridView Widget\n```dart\n\n```\n## Screenshots\n\n- SizedBox Widget ![SizedBox Widgets](https://snipboard.io/DLd4TM.jpg)\n- Container Widgets ![Container Widgets](https://snipboard.io/ntLaHo.jpg)\n- Rows Widget ![Rows Widgets](https://snipboard.io/GejF5y.jpg)\n- Column Widget ![Column Widgets](https://snipboard.io/2DFKNr.jpg)\n- TextButton and ElevatedButton Widget ![Button Widgets](https://snipboard.io/CmXa4x.jpg)\n- ListView Widgets ![ListView Widget](https://snipboard.io/0bQ9px.jpg)\n## Authors\n\n- [@DevanshSadhya](https://github.com/DevanshSadhya)\n\n\n## Support\n\nFor support, email devanshsadhya77@gmail.com or join our discord channel.\n\n\n## Lessons Learned\n\nWhat did you learn while building this project? What challenges did you face and how did you overcome them?\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevanshsadhya%2Fflutter_basics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevanshsadhya%2Fflutter_basics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevanshsadhya%2Fflutter_basics/lists"}