{"id":13550236,"url":"https://github.com/PoojaB26/FlutterBasicWidgets","last_synced_at":"2025-04-03T00:33:22.223Z","repository":{"id":33815289,"uuid":"148995455","full_name":"PoojaB26/FlutterBasicWidgets","owner":"PoojaB26","description":"ABC of Flutter widgets. Intended for super beginners at Flutter. Play with 35+ examples in DartPad directly and get familiar with various basic widgets in Flutter","archived":false,"fork":false,"pushed_at":"2022-12-09T23:32:15.000Z","size":2696,"stargazers_count":913,"open_issues_count":4,"forks_count":287,"subscribers_count":47,"default_branch":"master","last_synced_at":"2024-11-03T20:35:10.648Z","etag":null,"topics":["basic","beginner","dart","examples","flutter","playground","widgets"],"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/PoojaB26.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}},"created_at":"2018-09-16T12:53:44.000Z","updated_at":"2024-11-01T13:22:42.000Z","dependencies_parsed_at":"2023-01-15T02:45:49.234Z","dependency_job_id":null,"html_url":"https://github.com/PoojaB26/FlutterBasicWidgets","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/PoojaB26%2FFlutterBasicWidgets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PoojaB26%2FFlutterBasicWidgets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PoojaB26%2FFlutterBasicWidgets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PoojaB26%2FFlutterBasicWidgets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PoojaB26","download_url":"https://codeload.github.com/PoojaB26/FlutterBasicWidgets/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246916733,"owners_count":20854511,"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":["basic","beginner","dart","examples","flutter","playground","widgets"],"created_at":"2024-08-01T12:01:30.566Z","updated_at":"2025-04-03T00:33:17.847Z","avatar_url":"https://github.com/PoojaB26.png","language":"Dart","funding_links":["https://paypal.me/PoojaBhaumik"],"categories":["Dart","Flutter Components Examples for Beginners"],"sub_categories":[],"readme":"# Basic Widgets Examples\n\nThis is aimed for complete beginners in Flutter, to get them acquainted with the various basic widgets in Flutter. \n\n## Run this project\n\n**EDIT** : \nNo need of running the project, simply run the code in the new official Flutter online compiler [DartPad](https://dartpad.dartlang.org/flutter). All the DartPad links are given along with the example.\n\n#### Still want to run the project?\n\n* Fork this project.\n* You don't need an emulator or simulator to run this anymore, web component has been added!\n\n\n### This project helped you? Buy me a cupcake to support me! [![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://paypal.me/PoojaBhaumik)\n \n# Examples\n\n## Text\n\n### Try out Text widget and it's properties directly from [DartPad](https://dartpad.dev/d548285fd710d4c94cb1ff59835b85bd)\n\n\n\u003ctable\u003e\n  \u003ctr\u003e\u003ctd\u003e \u003cb\u003ePlay with Text properties and styles\u003c/b\u003e \u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n\u003ctd\u003e\n  \u003cpre\u003e \n  Text(\n          \"Hello Flutter It is Awesome WOW\",\n          textAlign: TextAlign.right,\n          textDirection: TextDirection.ltr,\n          overflow: TextOverflow.ellipsis,\n          maxLines: 2,\n          style: TextStyle(\n              color: Colors.black,\n              fontSize: 50.0,\n              fontWeight: FontWeight.w200,\n              letterSpacing: 2.0,\n              wordSpacing: 40.0,\n              decoration: TextDecoration.overline,\n              decorationStyle: TextDecorationStyle.wavy),\n        ), \n        \u003c/pre\u003e\n\u003c/td\u003e\n\u003ctd\u003e\n  \u003cimg src = \"https://github-bucket-2604.s3.us-east-2.amazonaws.com/Screenshot+2020-04-21+at+05.53.51.png\" width = 200\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n  \u003c/table\u003e\n  \n## AppBar\n\n### Try AppBar examples directly from [DartPad](https://dartpad.dev/bd6bb228f0be205648a74490f35f776f)\n\n\u003ctable\u003e\n  \u003ctr\u003e\u003ctd\u003e \u003cb\u003eAppBar with Title\u003c/b\u003e \u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cpre\u003e\n      AppBar(\n        backgroundColor: Colors.red,\n        title: Text(\"Title\",),\n        elevation: 4.0,\n      ),\n      \u003c/pre\u003e\u003c/td\u003e\u003ctd\u003e\u003cimg src=\"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/appb1.png\" width=200\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e \u003cb\u003eAppBar with List of Actions\u003c/b\u003e \u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cpre\u003e\n       AppBar(\n        title: Text(\"Title\"),\n        actions: \u003cWidget\u003e[\n          IconButton(\n            icon: Icon(Icons.search),\n            onPressed: () {},\n          ),\n          IconButton(\n            icon: Icon(Icons.add),\n            onPressed: () {},\n          ),\n        ],\n      ),\n      \u003c/pre\u003e\u003c/td\u003e\u003ctd\u003e\u003cimg src=\"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/appb2.png\" width=200\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e \u003cb\u003eAppBar with Text and Icon Themes\u003c/b\u003e \u003c/td\u003e\u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cpre\u003e\n     AppBar(\n        backgroundColor: Colors.blueAccent,\n        title: Text(\"Title\"),\n        actions: \u003cWidget\u003e[\n          IconButton(\n            icon: Icon(Icons.search),\n            onPressed: () {},\n          ),\n        ],\n        iconTheme: IconThemeData(\n          color: Colors.white,\n        ),\n        textTheme: TextTheme(\n          title: TextStyle(\n            color: Colors.white,\n            fontSize: 20.0\n          ),\n        ),\n      ),\n      \u003c/pre\u003e\u003c/td\u003e\u003ctd\u003e\u003cimg src=\"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/appb3.png\" width=200\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e \u003cb\u003eAppBar with centered Title and Subtitle\u003c/b\u003e \u003c/td\u003e\u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cpre\u003e\n    AppBar(\n        automaticallyImplyLeading: false,\n        title: Center(\n          child: Column(\n            crossAxisAlignment: CrossAxisAlignment.center,\n            mainAxisSize: MainAxisSize.max,\n            mainAxisAlignment: MainAxisAlignment.center,\n            children: \u003cWidget\u003e[\n              Text(\n                \"Title\",\n                style: TextStyle(fontSize: 18.0),\n              ),\n              Text(\n                \"subtitle\",\n                style: TextStyle(fontSize: 14.0),\n              ),\n            ],\n          ),\n        ),\n      ),\n      \u003c/pre\u003e\u003c/td\u003e\u003ctd\u003e\u003cimg src=\"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/appb5.png\" width=200\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e \u003cb\u003eAppBar with Logo\u003c/b\u003e \u003c/td\u003e\u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cpre\u003e\n     AppBar(\n        automaticallyImplyLeading: false,\n        backgroundColor: Colors.yellow,\n        title: Row(\n          mainAxisAlignment: MainAxisAlignment.start,\n          mainAxisSize: MainAxisSize.max,\n          children: \u003cWidget\u003e[\n            FlutterLogo(),\n            Padding(\n              padding: const EdgeInsets.only(left: 16.0),\n              child: Text(\n                \"Title with image\",\n              ),\n            ),\n          ],\n        ),\n      ),\n      \u003c/pre\u003e\u003c/td\u003e\u003ctd\u003e\u003cimg src=\"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/appb6.png\" width=200\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e \u003cb\u003eTransparent AppBar\u003c/b\u003e \u003c/td\u003e\u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cpre\u003e\n     AppBar(\n        backgroundColor: Colors.transparent,\n        title: Text(\"Transparent AppBar\"),\n        actions: \u003cWidget\u003e[\n          IconButton(\n            icon: Icon(\n              Icons.search,\n            ),\n            onPressed: () {},\n          )\n        ],\n      ),\n      \u003c/pre\u003e\u003c/td\u003e\u003ctd\u003e\u003cimg src=\"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/appb7.png\" width=200\u003e\u003c/tr\u003e\n  \n  \n  \u003c/table\u003e\n\n## Container\n\n### Try Container examples directly from [DartPad](https://dartpad.dev/a30023e2cb47793f2d7d586a3d791dee)\n\n\u003ctable\u003e\n    \u003ctr\u003e\u003ctd\u003e \u003cb\u003eContainer with full-device sized Flutter Logo\u003c/b\u003e \u003c/td\u003e\u003c/tr\u003e\n          \u003ctr\u003e\n                    \u003ctd\u003e\n                              \u003cpre\u003e\n     Container(\n        height: MediaQuery.of(context).size.height,\n        width: MediaQuery.of(context).size.width,\n        margin: EdgeInsets.all(25.0),\n        decoration: FlutterLogoDecoration(),\n      ),\n                              \u003c/pre\u003e\n                    \u003c/td\u003e \u003ctd\u003e\u003cimg src = \"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/con1.png\" width = 500\u003e \u003c/td\u003e\u003c/tr\u003e      \u003ctr\u003e\u003ctd\u003e \u003cb\u003eContainer with shadow, border, and child\u003c/b\u003e \u003c/td\u003e\u003c/tr\u003e\n                    \u003ctr\u003e\u003ctd\u003e\n                              \u003cpre\u003e\n      Container(\n        height: MediaQuery.of(context).size.height,\n        width: MediaQuery.of(context).size.width,\n        margin: EdgeInsets.all(25.0),\n        decoration: ShapeDecoration(\n          color: Colors.white,\n          shadows: \u003cBoxShadow\u003e[\n            BoxShadow(color: Colors.black, blurRadius: 15.0)\n          ],\n          shape: Border.all(\n            color: Colors.red,\n            width: 8.0,\n          ),\n        ),\n        child: Center(child: const Text('Hello Flutter', textAlign: TextAlign.center)),\n      ),\n                              \u003c/pre\u003e\n                    \u003c/td\u003e\u003ctd\u003e\u003cimg src = \"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/con2.png\" width = 200\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n      \u003ctr\u003e\u003ctd\u003e \u003cb\u003eRounded rectangle containers with border\u003c/b\u003e \u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n       \u003cpre\u003e\n     Container(\n        height: MediaQuery.of(context).size.height,\n        width: MediaQuery.of(context).size.width,\n        margin: EdgeInsets.all(25.0),\n        decoration: BoxDecoration(\n          color: Colors.yellow,\n          borderRadius: BorderRadius.circular(55.0),\n          border: Border.all(\n            width: 5.0,\n            color: Colors.red,\n          ),\n        ),\n        child: Center(child: const Text('Hello Flutter', textAlign: TextAlign.center)),\n      ),\n      \u003c/pre\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\u003cimg src = \"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/con3.png\" width = 200\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e \u003cb\u003eContainer with alignment property\u003c/b\u003e \u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n       \u003cpre\u003e\n    Container(\n        margin: EdgeInsets.all(20.0),\n        width: double.infinity,\n        height: 300.0,\n        color: Colors.red,\n        alignment: Alignment.topRight,\n        padding: EdgeInsets.all(20.0),\n        child: FlutterLogo(size: 100.0,),\n      ),\n      \u003c/pre\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\u003cimg src = \"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/con4.png\" width = 200\u003e\u003c/td\u003e\n\u003c/tr\u003e\n \u003ctr\u003e\u003ctd\u003e \u003cb\u003eContainer with minWidth and maxWidth Box Constraints\u003c/b\u003e \u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n       \u003cpre\u003e\n   Container(\n          margin: EdgeInsets.all(20.0),\n          constraints: BoxConstraints(\n            maxWidth: 400.0,\n            minWidth: 200.0\n          ),\n          width: 50.0,\n          alignment: Alignment.topCenter,\n          child: Image.network('https://picsum.photos/500/400'),\n        ),\n      \u003c/pre\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\u003cimg src = \"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/con5.png\" width = 200\u003e\u003c/td\u003e\n\u003c/tr\u003e\n  \u003ctr\u003e\u003ctd\u003e \u003cb\u003eContainer with List of Box Shadow\u003c/b\u003e \u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n       \u003cpre\u003e\n  Container(\n          height: 100.0,\n          width: 200.0,\n          decoration: BoxDecoration(\n              color: Colors.white,\n              boxShadow: [\n              BoxShadow(color: Colors.red, blurRadius: 12.0 ),\n              BoxShadow(color: Colors.green, blurRadius: 40.0)\n              ]\n          ),\n        )\n      \u003c/pre\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\u003cimg src = \"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/con6.png\" width = 500\u003e\u003c/td\u003e\n\u003c/tr\u003e\n \u003ctr\u003e\u003ctd\u003e \u003cb\u003eContainer with Image and Rounded Border\u003c/b\u003e \u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n       \u003cpre\u003e\n  Container(\n          height: 200.0,\n          width: 200.0,\n          decoration: BoxDecoration(\n            borderRadius: BorderRadius.circular(20.0),\n              color: Colors.white,\n              image: DecorationImage(fit: BoxFit.cover,\n                  image: NetworkImage('https://picsum.photos/200/300'))\n          ),\n        )\n      \u003c/pre\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\u003cimg src = \"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/con7.png\" width = 200\u003e\u003c/td\u003e\n\u003c/tr\u003e\n \u003ctr\u003e\u003ctd\u003e \u003cb\u003eCircular Container\u003c/b\u003e \u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n       \u003cpre\u003e\n   Container(\n          height: 200.0,\n          width: 200.0,\n          alignment: Alignment.center,\n          decoration: BoxDecoration(\n            borderRadius: BorderRadius.circular(200.0),\n              color: Colors.green,\n          ),\n          child: Text('Hello'),\n        )\n      \u003c/pre\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\u003cimg src = \"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/con8.png\" width = 200\u003e\u003c/td\u003e\n\u003c/tr\u003e\n \u003ctr\u003e\u003ctd\u003e \u003cb\u003eContainer with Horizontal Radius of left and right Radius\u003c/b\u003e \u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n       \u003cpre\u003e\n  Container(\n          height: 200.0,\n          width: 200.0,\n          alignment: Alignment.center,\n          decoration: BoxDecoration(\n            borderRadius: BorderRadius.horizontal(\n              left: Radius.circular(20.0),\n              right: Radius.circular(80.0)\n            ),\n              color: Colors.green,\n          ),\n          child: Text('Hello'),\n        )\n      \u003c/pre\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\u003cimg src = \"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/con9.png\" width = 200\u003e\u003c/td\u003e\n\u003c/tr\u003e\n  \u003ctr\u003e\u003ctd\u003e \u003cb\u003eContainer with Vertical Radius of top and bottom Radius\u003c/b\u003e \u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n       \u003cpre\u003e\n Container(\n          height: 200.0,\n          width: 200.0,\n          alignment: Alignment.center,\n          decoration: BoxDecoration(\n            borderRadius: BorderRadius.vertical(\n              top: Radius.circular(20.0),\n              bottom: Radius.circular(80.0)\n            ),\n              color: Colors.green,\n          ),\n          child: Text('Hello'),\n        )\n      \u003c/pre\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\u003cimg src = \"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/con10.png\" width = 200\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\n\u003c/table\u003e\n          \n## Column\n\n### Try Column examples directly from [DartPad](https://dartpad.dev/f814f180582790d428eb70df4092403d)\n\n\u003ctable\u003e    \u003ctr\u003e\u003ctd\u003e \u003cb\u003eSimple Column of similar Text children\u003c/b\u003e \u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cpre\u003e\n      Column(\n          children: \u003cWidget\u003e[\n            Text(\"Column 1\", style: bigStyle,),\n            Text(\"Column 2\", style: bigStyle,),\n            Text(\"Column 3\", style: bigStyle,)\n          ],\n        )\n      \u003c/pre\u003e\n    \u003c/td\u003e\u003ctd\u003e\u003cimg src=\"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/col1.png\" width=200\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n          \u003ctr\u003e\u003ctd\u003e \u003cb\u003eColumn of different Widget children\u003c/b\u003e \u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cpre\u003e\n      Column(\n          children: \u003cWidget\u003e[\n            FlutterLogo(\n              size: 100.0,\n              colors: Colors.red,\n            ),\n            Text(\"Column 2\", style: bigStyle,),\n            Container(\n              color: Colors.green,\n              height: 100.0,\n              width: 100.0,\n            )\n          ],\n        )\n      \u003c/pre\u003e\n    \u003c/td\u003e\u003ctd\u003e\u003cimg src=\"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/col2.png\" width=200\u003e\u003c/td\u003e\n    \u003ctr\u003e\u003ctd\u003e \u003cb\u003ePlaying with MainAxisAlignment\u003c/b\u003e \u003c/td\u003e\u003c/tr\u003e\n  \u003c/tr\u003e    \n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cpre\u003e\n      Column(\n            mainAxisSize: MainAxisSize.max,\n            mainAxisAlignment: MainAxisAlignment.spaceAround,\n            crossAxisAlignment: CrossAxisAlignment.end,\n            children: \u003cWidget\u003e[\n              FlutterLogo(\n                size: 100.0,\n                colors: Colors.red,\n              ),\n              Text(\"Child Two\", style: bigStyle,),\n              Container(\n                color: Colors.blue,\n                height: 100.0,\n                width: 100.0,\n              )\n            ],\n          ),\n      \u003c/pre\u003e\n    \u003c/td\u003e\u003ctd\u003e\u003cimg src=\"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/col3.png\" width=200\u003e\u003c/td\u003e\n  \u003ctr\u003e\u003ctd\u003e \u003cb\u003eColumn having Row as child\u003c/b\u003e \u003c/td\u003e\u003c/tr\u003e\n  \u003c/tr\u003e  \n    \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cpre\u003e\n      Column(\n            mainAxisSize: MainAxisSize.max,\n            crossAxisAlignment: CrossAxisAlignment.center,\n            mainAxisAlignment: MainAxisAlignment.spaceAround,\n            children: \u003cWidget\u003e[\n              Text(\"Parent Text 1\"),\n              Text(\"Parent Text 2\"),\n              Row(\n                mainAxisAlignment: MainAxisAlignment.spaceAround,\n                children: \u003cWidget\u003e[\n                  Text(\"Child Row Text 1\"),\n                  Text(\"Child Row Text 2\")\n                ],\n              ),\n            ],\n          ),\n      \u003c/pre\u003e\n    \u003c/td\u003e\u003ctd\u003e\u003cimg src=\"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/col4.png\" width=200\u003e\u003c/td\u003e\n  \u003c/tr\u003e    \n\u003c/table\u003e\n\n\n## Row\n  \n### Try Row examples directly from [DartPad](https://dartpad.dev/564ca3391b28bc035e675ea86c4355ef)\n\n\u003ctable\u003e\u003ctr\u003e\u003ctd\u003e \u003cb\u003eSimple Row of similar Text children\u003c/b\u003e \u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cpre\u003e\n      Row(\n            mainAxisSize: MainAxisSize.min,\n            children: \u003cWidget\u003e[\n              Text(\"Column 1\", style: bigStyle,),\n              Text(\"Column 2\", style: bigStyle,),\n              Text(\"Column 3\", style: bigStyle,)\n            ],\n          )\n      \u003c/pre\u003e\n    \u003c/td\u003e\u003ctd\u003e\u003cimg src=\"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/row1.png\" width=200\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\u003ctd\u003e \u003cb\u003eRow with children of different Widgets\u003c/b\u003e\u003c/td\u003e\u003c/tr\u003e    \n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cpre\u003e\n      Row(\n            mainAxisSize: MainAxisSize.min,\n            children: \u003cWidget\u003e[\n              FlutterLogo(\n                size: 100.0,\n              ),\n              Text(\"Column 2\", style: bigStyle,),\n              Container(\n                color: Colors.green,\n                height: 100.0,\n                width: 100.0,\n              )\n            ],\n          )\n      \u003c/pre\u003e\n    \u003c/td\u003e\u003ctd\u003e\u003cimg src=\"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/row2.png\" width=200\u003e\u003c/td\u003e\n    \u003ctr\u003e\u003ctd\u003e \u003cb\u003ePlaying with MainAxisAlignment\u003c/b\u003e \u003c/td\u003e\u003c/tr\u003e\n  \u003c/tr\u003e    \n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cpre\u003e\n      Row(\n            mainAxisSize: MainAxisSize.max,\n            mainAxisAlignment: MainAxisAlignment.spaceBetween,\n            crossAxisAlignment: CrossAxisAlignment.center,\n            children: \u003cWidget\u003e[\n              FlutterLogo(\n                size: 100.0,\n              ),\n              Text(\"Child Two\", style: bigStyle,),\n              Container(\n                color: Colors.blue,\n                height: 100.0,\n                width: 100.0,\n              )\n            ],\n          ),\n      \u003c/pre\u003e\n    \u003c/td\u003e\u003ctd\u003e\u003cimg src=\"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/row3.png\" width=200\u003e\u003c/td\u003e\n  \u003c/tr\u003e  \u003ctr\u003e\u003ctd\u003e \u003cb\u003eRow having Column as child\u003c/b\u003e \u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cpre\u003e\n      Row(\n            mainAxisSize: MainAxisSize.min,\n            crossAxisAlignment: CrossAxisAlignment.center,\n            mainAxisAlignment: MainAxisAlignment.spaceAround,\n            children: \u003cWidget\u003e[\n              Text(\"Parent Text 1\"),\n              Text(\"Parent Text 2\"),\n              Column(\n                mainAxisSize: MainAxisSize.min,\n                mainAxisAlignment: MainAxisAlignment.spaceAround,\n                children: \u003cWidget\u003e[\n                  Text(\"Child Row Text 1\"),\n                  Text(\"Child Row Text 2\")\n                ],\n              ),\n            ],\n          ),\n      \u003c/pre\u003e\n    \u003c/td\u003e\u003ctd\u003e\u003cimg src=\"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/row4.png\" width=200\u003e\u003c/td\u003e\n  \u003c/tr\u003e    \n\u003c/table\u003e\n\n\n## Buttons\n          \n### Try Buttons examples directly from [DartPad](https://dartpad.dev/b4fb1e9bd187d4a808f85d962f63e9d1)\n          \n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cpre\u003e\n     RaisedButton(\n          onPressed: (){},\n          color: Colors.yellow,\n          disabledTextColor: Colors.grey,\n          shape: RoundedRectangleBorder(\n            borderRadius: BorderRadius.circular(20.0)\n          ),\n          elevation: 20.0,\n          splashColor: Colors.green,\n          highlightColor: Colors.red,\n          highlightElevation: 1.0,\n          child: Text(\"Raised Button\"),\n        ),\n      \u003c/pre\u003e\n    \u003c/td\u003e\u003ctd\u003e\u003cimg src=\"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/but1.gif\" width=200\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n      \n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cpre\u003e\n     MaterialButton(\n          minWidth: 250.0,\n          onPressed: (){},\n          colorBrightness: Brightness.dark,\n          color: Colors.deepPurpleAccent,\n          elevation: 20.0,\n          splashColor: Colors.green,\n          //highlightColor: Colors.red,\n          highlightElevation: 1.0,\n          child: Text(\"Material Button\"),\n        ),\n      \u003c/pre\u003e\n    \u003c/td\u003e\u003ctd\u003e\u003cimg src=\"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/but2.gif\" width=200\u003e\u003c/td\u003e\n  \u003c/tr\u003e    \n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cpre\u003e\n      TextButton(\n            onPressed: () {},\n            style: ButtonStyle(\n              backgroundColor:\n                  MaterialStateProperty.all(Colors.deepPurpleAccent),\n              overlayColor: MaterialStateProperty.all(Colors.red),\n              foregroundColor: MaterialStateProperty.all(Colors.green),\n            ),\n            child: Text('Text Button'),\n          ),\n      \u003c/pre\u003e\n    \u003c/td\u003e\u003ctd\u003e\u003cimg src=\"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/but3.gif\" width=200\u003e\u003c/td\u003e\n  \u003c/tr\u003e  \n    \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cpre\u003e\n     OutlineButton(\n          onPressed: (){},\n          borderSide: BorderSide(\n            width: 5.0,\n            color: Colors.deepPurpleAccent\n          ),\n          color: Colors.deepPurpleAccent,\n          highlightedBorderColor: Colors.purple,\n          splashColor: Colors.green,\n          //highlightColor: Colors.red,\n          child: Text(\"Raised Button\"),\n          shape: RoundedRectangleBorder(\n            borderRadius: BorderRadius.vertical(\n            top: Radius.circular(20.0), bottom: Radius.circular(1.0))\n          ),\n        ),\n      \u003c/pre\u003e\n    \u003c/td\u003e\u003ctd\u003e\u003cimg src=\"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/but4.gif\" width=200\u003e\u003c/td\u003e\n  \u003c/tr\u003e    \n      \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cpre\u003e\n     IconButton(\n            color: Colors.purple,\n            splashColor: Colors.yellow,\n           // highlightColor: Colors.red,\n            icon: Icon(Icons.build, size: 40.0,),\n            onPressed: (){})\n      ),\n      \u003c/pre\u003e\n    \u003c/td\u003e\u003ctd\u003e\u003cimg src=\"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/but5.gif\" width=200\u003e\u003c/td\u003e\n  \u003c/tr\u003e \n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cpre\u003e\n    Column(\n          mainAxisAlignment: MainAxisAlignment.center,\n          children: \u003cWidget\u003e[\n            FloatingActionButton(\n                backgroundColor: Colors.orange,\n                child: Icon(Icons.mic, size: 30.0, color: Colors.white,),\n                onPressed: (){}),\n            FloatingActionButton(\n                mini: true,\n                backgroundColor: Colors.green,\n                child: Icon(Icons.mic, size: 30.0, color: Colors.white,),\n                onPressed: (){}),\n          ],\n        )\n      ),\n      \u003c/pre\u003e\n    \u003c/td\u003e\u003ctd\u003e\u003cimg src=\"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/but6.png\" width=200\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\n## Stack\n\n### Try Stack examples directly from [DartPad](https://dartpad.dev/8452d46bb69207184364d90102855257)\n\n\u003ctable\u003e\n  \u003ctr\u003e\u003ctd\u003e \u003cb\u003eStack of overlapping containers of reducing size\u003c/b\u003e \u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n\u003ctd\u003e\n  \u003cpre\u003e \n  Stack(\n        children: \u003cWidget\u003e[\n          Container(\n            height: 300.0,\n            width: 300.0,\n            color: Colors.red,\n          ),\n          Container(\n            height: 250.0,\n            width: 250.0,\n            color: Colors.green,\n          ),\n          Container(\n            height: 200.0,\n            width: 200.0,\n            color: Colors.yellow,\n          )\n        ],\n      ),\n        \u003c/pre\u003e\n\u003c/td\u003e\n\u003ctd\u003e\n  \u003cimg src = \"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/stk1.png\" width = 200\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n  \n  \n  \u003ctr\u003e\u003ctd\u003e \u003cb\u003ePlaying with Alignment property\u003c/b\u003e \u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n\u003ctd\u003e\n  \u003cpre\u003e \n  Stack(\n        alignment: Alignment.center,\n        children: \u003cWidget\u003e[\n          Container(\n            height: 300.0,\n            width: 300.0,\n            color: Colors.red,\n          ),\n          Container(\n            height: 250.0,\n            width: 250.0,\n            color: Colors.green,\n          ),\n          Container(\n            height: 200.0,\n            width: 200.0,\n            color: Colors.yellow,\n          )\n        ],\n      ),\u003c/pre\u003e\n\u003c/td\u003e\n\u003ctd\u003e\n  \u003cimg src = \"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/stk2.png\" width = 200\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\n \u003ctr\u003e\u003ctd\u003e \u003cb\u003eOne child on top of another using Positioned\u003c/b\u003e \u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n\u003ctd\u003e\n  \u003cpre\u003e \n  Container(\n        height: 400.0,\n        //color: Colors.yellow,\n        child: Padding(\n          padding: const EdgeInsets.all(8.0),\n          child: Stack(\n            alignment: Alignment.center,\n            children: \u003cWidget\u003e[\n              Container(\n                height: 300.0,\n                width: 300.0,\n                color: Colors.red,\n              ),\n              Positioned(\n                top: 0.0,\n                child: Container(\n                  height: 250.0,\n                  width: 250.0,\n                  color: Colors.green,\n                ),\n              ),\n            ],\n          ),\n        ),\n      ),\n        \u003c/pre\u003e\n\u003c/td\u003e\n\u003ctd\u003e\n  \u003cimg src = \"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/stk3.png\" width = 200\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\n \u003ctr\u003e\u003ctd\u003e \u003cb\u003ePlaying with Positioned properties\u003c/b\u003e \u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n\u003ctd\u003e\n  \u003cpre\u003e \n  Container(\n        height: 400.0,\n        //color: Colors.yellow,\n        child: Padding(\n          padding: const EdgeInsets.all(8.0),\n          child: Stack(\n            alignment: Alignment.center,\n            children: \u003cWidget\u003e[\n              Container(\n                height: 300.0,\n                width: 300.0,\n                color: Colors.red,\n              ),\n              Positioned(\n                top: 0.0,\n                bottom: 0.0,\n                child: Container(\n                  height: 250.0,\n                  width: 250.0,\n                  color: Colors.green,\n                ),\n              ),\n            ],\n          ),\n        ),\n      ),\n        \u003c/pre\u003e\n\u003c/td\u003e\n\u003ctd\u003e\n  \u003cimg src = \"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/stk4.png\" width = 200\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\n \u003ctr\u003e\u003ctd\u003e \u003cb\u003ePlaying with Positioned\u003c/b\u003e \u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n\u003ctd\u003e\n  \u003cpre\u003e \n  Container(\n        height: 400.0,\n        width: 350.0,\n        //color: Colors.yellow,\n        child: Padding(\n          padding: const EdgeInsets.all(8.0),\n          child: Stack(\n            alignment: Alignment.center,\n            children: \u003cWidget\u003e[\n              Container(\n                height: 300.0,\n                width: 200.0,\n                color: Colors.red,\n              ),\n              Positioned(\n                right: 0.0,\n                child: Container(\n                  height: 250.0,\n                  width: 150.0,\n                  color: Colors.green,\n                ),\n              ),\n            ],\n          ),\n        ),\n      ),\n        \u003c/pre\u003e\n\u003c/td\u003e\n\u003ctd\u003e\n  \u003cimg src = \"https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/stk5.png\" width = 200\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n  \u003c/table\u003e\n\n## TextFields\n  \n### Try TextFields Examples:\n\n\u003ctable\u003e\u003ctr\u003e\u003ctd\u003e \u003cb\u003eRounded TextField without Outline\u003c/b\u003e \u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cpre\u003e\n     TextField(\n          decoration: new InputDecoration(\n              border: new OutlineInputBorder(\n                borderSide: BorderSide(\n                  width: 0,\n                  style: BorderStyle.none,\n                ),\n                borderRadius: const BorderRadius.all(\n                  const Radius.circular(10.0),\n                ),\n              ),\n              filled: true,\n              hintStyle: new TextStyle(color: Colors.white30),\n              hintText: \"Type in your text\"\n          );\n      \u003c/pre\u003e\n    \u003c/td\u003e\u003ctd\u003e\u003cimg src=\"https://user-images.githubusercontent.com/3306366/113850345-faf37280-97b7-11eb-8a2d-f248bc7919d1.png\" width=200\u003e\u003c/td\u003e\n \u003c/tr\u003e  \n \n \u003ctr\u003e\u003ctd\u003e \u003cb\u003eRounded TextField With Outline\u003c/b\u003e \u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cpre\u003e\n     Padding(\n      padding: const EdgeInsets.all(30.0),\n      child: TextField(\n        decoration: new InputDecoration(\n            border: new OutlineInputBorder(\n              borderSide: BorderSide(\n                width: 2,\n                style: BorderStyle.none,\n              ),\n              borderRadius: const BorderRadius.all(\n                const Radius.circular(10.0),\n              ),\n            ),\n            filled: true,\n            hintStyle: new TextStyle(color: Colors.white30),\n            hintText: \"Type in your text\"),\n      ),\n    );\n      \u003c/pre\u003e\n    \u003c/td\u003e\u003ctd\u003e\u003cimg src=\"https://user-images.githubusercontent.com/3306366/113850977-a13f7800-97b8-11eb-931d-a6dded90091f.png\" width=200\u003e\u003c/td\u003e\n  \u003c/tr\u003e \n\u003c/table\u003e\n\n## Contributors\nPooja Bhaumik \u003cbr\u003e\n\n[![Twitter Follow](https://img.shields.io/twitter/follow/pooja_bhaumik.svg?style=social\u0026label=Follow)](https://twitter.com/pooja_bhaumik)\n\n\n\n## Getting Started\n\nFor help getting started with Flutter, view our online\n[documentation](https://flutter.io/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPoojaB26%2FFlutterBasicWidgets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FPoojaB26%2FFlutterBasicWidgets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPoojaB26%2FFlutterBasicWidgets/lists"}