[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9513":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":16,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":18,"fork":18,"defaultBranch":19,"hasWiki":20,"hasPages":18,"topics":21,"createdAt":10,"pushedAt":10,"updatedAt":29,"readmeContent":30,"aiSummary":31,"trendingCount":16,"starSnapshotCount":16,"syncStatus":15,"lastSyncTime":32,"discoverSource":33},9513,"FlutterBasicWidgets","PoojaB26\u002FFlutterBasicWidgets","PoojaB26","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","",null,"Dart",937,285,44,2,0,48.37,false,"master",true,[22,23,24,25,26,27,28],"basic","beginner","dart","examples","flutter","playground","widgets","2026-06-12 04:00:45","# 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:\u002F\u002Fdartpad.dartlang.org\u002Fflutter). 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:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDonate-PayPal-green.svg)](https:\u002F\u002Fpaypal.me\u002FPoojaBhaumik)\n \n# Examples\n\n## Text\n\n### Try out Text widget and it's properties directly from [DartPad](https:\u002F\u002Fdartpad.dev\u002Fd548285fd710d4c94cb1ff59835b85bd)\n\n\n\u003Ctable>\n  \u003Ctr>\u003Ctd> \u003Cb>Play with Text properties and styles\u003C\u002Fb> \u003C\u002Ftd>\u003C\u002Ftr>\n  \u003Ctr>\n\u003Ctd>\n  \u003Cpre> \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\u002Fpre>\n\u003C\u002Ftd>\n\u003Ctd>\n  \u003Cimg src = \"https:\u002F\u002Fgithub-bucket-2604.s3.us-east-2.amazonaws.com\u002FScreenshot+2020-04-21+at+05.53.51.png\" width = 200>\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n  \u003C\u002Ftable>\n  \n## AppBar\n\n### Try AppBar examples directly from [DartPad](https:\u002F\u002Fdartpad.dev\u002Fbd6bb228f0be205648a74490f35f776f)\n\n\u003Ctable>\n  \u003Ctr>\u003Ctd> \u003Cb>AppBar with Title\u003C\u002Fb> \u003C\u002Ftd>\u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd>\n      \u003Cpre>\n      AppBar(\n        backgroundColor: Colors.red,\n        title: Text(\"Title\",),\n        elevation: 4.0,\n      ),\n      \u003C\u002Fpre>\u003C\u002Ftd>\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Fappb1.png\" width=200>\u003C\u002Ftr>\n    \u003Ctr>\u003Ctd> \u003Cb>AppBar with List of Actions\u003C\u002Fb> \u003C\u002Ftd>\u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd>\n      \u003Cpre>\n       AppBar(\n        title: Text(\"Title\"),\n        actions: \u003CWidget>[\n          IconButton(\n            icon: Icon(Icons.search),\n            onPressed: () {},\n          ),\n          IconButton(\n            icon: Icon(Icons.add),\n            onPressed: () {},\n          ),\n        ],\n      ),\n      \u003C\u002Fpre>\u003C\u002Ftd>\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Fappb2.png\" width=200>\u003C\u002Ftr>\n    \u003Ctr>\u003Ctd> \u003Cb>AppBar with Text and Icon Themes\u003C\u002Fb> \u003C\u002Ftd>\u003C\u002Ftr>\n   \u003Ctr>\n    \u003Ctd>\n      \u003Cpre>\n     AppBar(\n        backgroundColor: Colors.blueAccent,\n        title: Text(\"Title\"),\n        actions: \u003CWidget>[\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\u002Fpre>\u003C\u002Ftd>\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Fappb3.png\" width=200>\u003C\u002Ftr>\n    \u003Ctr>\u003Ctd> \u003Cb>AppBar with centered Title and Subtitle\u003C\u002Fb> \u003C\u002Ftd>\u003C\u002Ftr>\n   \u003Ctr>\n    \u003Ctd>\n      \u003Cpre>\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>[\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\u002Fpre>\u003C\u002Ftd>\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Fappb5.png\" width=200>\u003C\u002Ftr>\n    \u003Ctr>\u003Ctd> \u003Cb>AppBar with Logo\u003C\u002Fb> \u003C\u002Ftd>\u003C\u002Ftr>\n   \u003Ctr>\n    \u003Ctd>\n      \u003Cpre>\n     AppBar(\n        automaticallyImplyLeading: false,\n        backgroundColor: Colors.yellow,\n        title: Row(\n          mainAxisAlignment: MainAxisAlignment.start,\n          mainAxisSize: MainAxisSize.max,\n          children: \u003CWidget>[\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\u002Fpre>\u003C\u002Ftd>\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Fappb6.png\" width=200>\u003C\u002Ftr>\n    \u003Ctr>\u003Ctd> \u003Cb>Transparent AppBar\u003C\u002Fb> \u003C\u002Ftd>\u003C\u002Ftr>\n   \u003Ctr>\n    \u003Ctd>\n      \u003Cpre>\n     AppBar(\n        backgroundColor: Colors.transparent,\n        title: Text(\"Transparent AppBar\"),\n        actions: \u003CWidget>[\n          IconButton(\n            icon: Icon(\n              Icons.search,\n            ),\n            onPressed: () {},\n          )\n        ],\n      ),\n      \u003C\u002Fpre>\u003C\u002Ftd>\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Fappb7.png\" width=200>\u003C\u002Ftr>\n  \n  \n  \u003C\u002Ftable>\n\n## Container\n\n### Try Container examples directly from [DartPad](https:\u002F\u002Fdartpad.dev\u002Fa30023e2cb47793f2d7d586a3d791dee)\n\n\u003Ctable>\n    \u003Ctr>\u003Ctd> \u003Cb>Container with full-device sized Flutter Logo\u003C\u002Fb> \u003C\u002Ftd>\u003C\u002Ftr>\n          \u003Ctr>\n                    \u003Ctd>\n                              \u003Cpre>\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\u002Fpre>\n                    \u003C\u002Ftd> \u003Ctd>\u003Cimg src = \"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Fcon1.png\" width = 500> \u003C\u002Ftd>\u003C\u002Ftr>      \u003Ctr>\u003Ctd> \u003Cb>Container with shadow, border, and child\u003C\u002Fb> \u003C\u002Ftd>\u003C\u002Ftr>\n                    \u003Ctr>\u003Ctd>\n                              \u003Cpre>\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>[\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\u002Fpre>\n                    \u003C\u002Ftd>\u003Ctd>\u003Cimg src = \"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Fcon2.png\" width = 200>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n      \u003Ctr>\u003Ctd> \u003Cb>Rounded rectangle containers with border\u003C\u002Fb> \u003C\u002Ftd>\u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>\n       \u003Cpre>\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\u002Fpre>\n      \u003C\u002Ftd>\n      \u003Ctd>\u003Cimg src = \"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Fcon3.png\" width = 200>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\u003Ctd> \u003Cb>Container with alignment property\u003C\u002Fb> \u003C\u002Ftd>\u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>\n       \u003Cpre>\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\u002Fpre>\n      \u003C\u002Ftd>\n      \u003Ctd>\u003Cimg src = \"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Fcon4.png\" width = 200>\u003C\u002Ftd>\n\u003C\u002Ftr>\n \u003Ctr>\u003Ctd> \u003Cb>Container with minWidth and maxWidth Box Constraints\u003C\u002Fb> \u003C\u002Ftd>\u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>\n       \u003Cpre>\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:\u002F\u002Fpicsum.photos\u002F500\u002F400'),\n        ),\n      \u003C\u002Fpre>\n      \u003C\u002Ftd>\n      \u003Ctd>\u003Cimg src = \"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Fcon5.png\" width = 200>\u003C\u002Ftd>\n\u003C\u002Ftr>\n  \u003Ctr>\u003Ctd> \u003Cb>Container with List of Box Shadow\u003C\u002Fb> \u003C\u002Ftd>\u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>\n       \u003Cpre>\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\u002Fpre>\n      \u003C\u002Ftd>\n      \u003Ctd>\u003Cimg src = \"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Fcon6.png\" width = 500>\u003C\u002Ftd>\n\u003C\u002Ftr>\n \u003Ctr>\u003Ctd> \u003Cb>Container with Image and Rounded Border\u003C\u002Fb> \u003C\u002Ftd>\u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>\n       \u003Cpre>\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:\u002F\u002Fpicsum.photos\u002F200\u002F300'))\n          ),\n        )\n      \u003C\u002Fpre>\n      \u003C\u002Ftd>\n      \u003Ctd>\u003Cimg src = \"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Fcon7.png\" width = 200>\u003C\u002Ftd>\n\u003C\u002Ftr>\n \u003Ctr>\u003Ctd> \u003Cb>Circular Container\u003C\u002Fb> \u003C\u002Ftd>\u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>\n       \u003Cpre>\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\u002Fpre>\n      \u003C\u002Ftd>\n      \u003Ctd>\u003Cimg src = \"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Fcon8.png\" width = 200>\u003C\u002Ftd>\n\u003C\u002Ftr>\n \u003Ctr>\u003Ctd> \u003Cb>Container with Horizontal Radius of left and right Radius\u003C\u002Fb> \u003C\u002Ftd>\u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>\n       \u003Cpre>\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\u002Fpre>\n      \u003C\u002Ftd>\n      \u003Ctd>\u003Cimg src = \"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Fcon9.png\" width = 200>\u003C\u002Ftd>\n\u003C\u002Ftr>\n  \u003Ctr>\u003Ctd> \u003Cb>Container with Vertical Radius of top and bottom Radius\u003C\u002Fb> \u003C\u002Ftd>\u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>\n       \u003Cpre>\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\u002Fpre>\n      \u003C\u002Ftd>\n      \u003Ctd>\u003Cimg src = \"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Fcon10.png\" width = 200>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\n\n\u003C\u002Ftable>\n          \n## Column\n\n### Try Column examples directly from [DartPad](https:\u002F\u002Fdartpad.dev\u002Ff814f180582790d428eb70df4092403d)\n\n\u003Ctable>    \u003Ctr>\u003Ctd> \u003Cb>Simple Column of similar Text children\u003C\u002Fb> \u003C\u002Ftd>\u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd>\n      \u003Cpre>\n      Column(\n          children: \u003CWidget>[\n            Text(\"Column 1\", style: bigStyle,),\n            Text(\"Column 2\", style: bigStyle,),\n            Text(\"Column 3\", style: bigStyle,)\n          ],\n        )\n      \u003C\u002Fpre>\n    \u003C\u002Ftd>\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Fcol1.png\" width=200>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n          \u003Ctr>\u003Ctd> \u003Cb>Column of different Widget children\u003C\u002Fb> \u003C\u002Ftd>\u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd>\n      \u003Cpre>\n      Column(\n          children: \u003CWidget>[\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\u002Fpre>\n    \u003C\u002Ftd>\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Fcol2.png\" width=200>\u003C\u002Ftd>\n    \u003Ctr>\u003Ctd> \u003Cb>Playing with MainAxisAlignment\u003C\u002Fb> \u003C\u002Ftd>\u003C\u002Ftr>\n  \u003C\u002Ftr>    \n  \u003Ctr>\n    \u003Ctd>\n      \u003Cpre>\n      Column(\n            mainAxisSize: MainAxisSize.max,\n            mainAxisAlignment: MainAxisAlignment.spaceAround,\n            crossAxisAlignment: CrossAxisAlignment.end,\n            children: \u003CWidget>[\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\u002Fpre>\n    \u003C\u002Ftd>\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Fcol3.png\" width=200>\u003C\u002Ftd>\n  \u003Ctr>\u003Ctd> \u003Cb>Column having Row as child\u003C\u002Fb> \u003C\u002Ftd>\u003C\u002Ftr>\n  \u003C\u002Ftr>  \n    \u003Ctr>\n    \u003Ctd>\n      \u003Cpre>\n      Column(\n            mainAxisSize: MainAxisSize.max,\n            crossAxisAlignment: CrossAxisAlignment.center,\n            mainAxisAlignment: MainAxisAlignment.spaceAround,\n            children: \u003CWidget>[\n              Text(\"Parent Text 1\"),\n              Text(\"Parent Text 2\"),\n              Row(\n                mainAxisAlignment: MainAxisAlignment.spaceAround,\n                children: \u003CWidget>[\n                  Text(\"Child Row Text 1\"),\n                  Text(\"Child Row Text 2\")\n                ],\n              ),\n            ],\n          ),\n      \u003C\u002Fpre>\n    \u003C\u002Ftd>\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Fcol4.png\" width=200>\u003C\u002Ftd>\n  \u003C\u002Ftr>    \n\u003C\u002Ftable>\n\n\n## Row\n  \n### Try Row examples directly from [DartPad](https:\u002F\u002Fdartpad.dev\u002F564ca3391b28bc035e675ea86c4355ef)\n\n\u003Ctable>\u003Ctr>\u003Ctd> \u003Cb>Simple Row of similar Text children\u003C\u002Fb> \u003C\u002Ftd>\u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd>\n      \u003Cpre>\n      Row(\n            mainAxisSize: MainAxisSize.min,\n            children: \u003CWidget>[\n              Text(\"Column 1\", style: bigStyle,),\n              Text(\"Column 2\", style: bigStyle,),\n              Text(\"Column 3\", style: bigStyle,)\n            ],\n          )\n      \u003C\u002Fpre>\n    \u003C\u002Ftd>\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Frow1.png\" width=200>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\u003Ctd> \u003Cb>Row with children of different Widgets\u003C\u002Fb>\u003C\u002Ftd>\u003C\u002Ftr>    \n  \u003Ctr>\n    \u003Ctd>\n      \u003Cpre>\n      Row(\n            mainAxisSize: MainAxisSize.min,\n            children: \u003CWidget>[\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\u002Fpre>\n    \u003C\u002Ftd>\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Frow2.png\" width=200>\u003C\u002Ftd>\n    \u003Ctr>\u003Ctd> \u003Cb>Playing with MainAxisAlignment\u003C\u002Fb> \u003C\u002Ftd>\u003C\u002Ftr>\n  \u003C\u002Ftr>    \n  \u003Ctr>\n    \u003Ctd>\n      \u003Cpre>\n      Row(\n            mainAxisSize: MainAxisSize.max,\n            mainAxisAlignment: MainAxisAlignment.spaceBetween,\n            crossAxisAlignment: CrossAxisAlignment.center,\n            children: \u003CWidget>[\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\u002Fpre>\n    \u003C\u002Ftd>\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Frow3.png\" width=200>\u003C\u002Ftd>\n  \u003C\u002Ftr>  \u003Ctr>\u003Ctd> \u003Cb>Row having Column as child\u003C\u002Fb> \u003C\u002Ftd>\u003C\u002Ftr>\n    \u003Ctr>\n    \u003Ctd>\n      \u003Cpre>\n      Row(\n            mainAxisSize: MainAxisSize.min,\n            crossAxisAlignment: CrossAxisAlignment.center,\n            mainAxisAlignment: MainAxisAlignment.spaceAround,\n            children: \u003CWidget>[\n              Text(\"Parent Text 1\"),\n              Text(\"Parent Text 2\"),\n              Column(\n                mainAxisSize: MainAxisSize.min,\n                mainAxisAlignment: MainAxisAlignment.spaceAround,\n                children: \u003CWidget>[\n                  Text(\"Child Row Text 1\"),\n                  Text(\"Child Row Text 2\")\n                ],\n              ),\n            ],\n          ),\n      \u003C\u002Fpre>\n    \u003C\u002Ftd>\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Frow4.png\" width=200>\u003C\u002Ftd>\n  \u003C\u002Ftr>    \n\u003C\u002Ftable>\n\n\n## Buttons\n          \n### Try Buttons examples directly from [DartPad](https:\u002F\u002Fdartpad.dev\u002Fb4fb1e9bd187d4a808f85d962f63e9d1)\n          \n\u003Ctable>\n  \u003Ctr>\n    \u003Ctd>\n      \u003Cpre>\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\u002Fpre>\n    \u003C\u002Ftd>\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Fbut1.gif\" width=200>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n      \n  \u003Ctr>\n    \u003Ctd>\n      \u003Cpre>\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          \u002F\u002FhighlightColor: Colors.red,\n          highlightElevation: 1.0,\n          child: Text(\"Material Button\"),\n        ),\n      \u003C\u002Fpre>\n    \u003C\u002Ftd>\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Fbut2.gif\" width=200>\u003C\u002Ftd>\n  \u003C\u002Ftr>    \n  \u003Ctr>\n    \u003Ctd>\n      \u003Cpre>\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\u002Fpre>\n    \u003C\u002Ftd>\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Fbut3.gif\" width=200>\u003C\u002Ftd>\n  \u003C\u002Ftr>  \n    \u003Ctr>\n    \u003Ctd>\n      \u003Cpre>\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          \u002F\u002FhighlightColor: 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\u002Fpre>\n    \u003C\u002Ftd>\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Fbut4.gif\" width=200>\u003C\u002Ftd>\n  \u003C\u002Ftr>    \n      \u003Ctr>\n    \u003Ctd>\n      \u003Cpre>\n     IconButton(\n            color: Colors.purple,\n            splashColor: Colors.yellow,\n           \u002F\u002F highlightColor: Colors.red,\n            icon: Icon(Icons.build, size: 40.0,),\n            onPressed: (){})\n      ),\n      \u003C\u002Fpre>\n    \u003C\u002Ftd>\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Fbut5.gif\" width=200>\u003C\u002Ftd>\n  \u003C\u002Ftr> \n  \u003Ctr>\n    \u003Ctd>\n      \u003Cpre>\n    Column(\n          mainAxisAlignment: MainAxisAlignment.center,\n          children: \u003CWidget>[\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\u002Fpre>\n    \u003C\u002Ftd>\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Fbut6.png\" width=200>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C\u002Ftable>\n\n\n## Stack\n\n### Try Stack examples directly from [DartPad](https:\u002F\u002Fdartpad.dev\u002F8452d46bb69207184364d90102855257)\n\n\u003Ctable>\n  \u003Ctr>\u003Ctd> \u003Cb>Stack of overlapping containers of reducing size\u003C\u002Fb> \u003C\u002Ftd>\u003C\u002Ftr>\n  \u003Ctr>\n\u003Ctd>\n  \u003Cpre> \n  Stack(\n        children: \u003CWidget>[\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\u002Fpre>\n\u003C\u002Ftd>\n\u003Ctd>\n  \u003Cimg src = \"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Fstk1.png\" width = 200>\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n  \n  \n  \u003Ctr>\u003Ctd> \u003Cb>Playing with Alignment property\u003C\u002Fb> \u003C\u002Ftd>\u003C\u002Ftr>\n  \u003Ctr>\n\u003Ctd>\n  \u003Cpre> \n  Stack(\n        alignment: Alignment.center,\n        children: \u003CWidget>[\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\u002Fpre>\n\u003C\u002Ftd>\n\u003Ctd>\n  \u003Cimg src = \"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Fstk2.png\" width = 200>\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\n\n \u003Ctr>\u003Ctd> \u003Cb>One child on top of another using Positioned\u003C\u002Fb> \u003C\u002Ftd>\u003C\u002Ftr>\n  \u003Ctr>\n\u003Ctd>\n  \u003Cpre> \n  Container(\n        height: 400.0,\n        \u002F\u002Fcolor: Colors.yellow,\n        child: Padding(\n          padding: const EdgeInsets.all(8.0),\n          child: Stack(\n            alignment: Alignment.center,\n            children: \u003CWidget>[\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\u002Fpre>\n\u003C\u002Ftd>\n\u003Ctd>\n  \u003Cimg src = \"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Fstk3.png\" width = 200>\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\n\n \u003Ctr>\u003Ctd> \u003Cb>Playing with Positioned properties\u003C\u002Fb> \u003C\u002Ftd>\u003C\u002Ftr>\n  \u003Ctr>\n\u003Ctd>\n  \u003Cpre> \n  Container(\n        height: 400.0,\n        \u002F\u002Fcolor: Colors.yellow,\n        child: Padding(\n          padding: const EdgeInsets.all(8.0),\n          child: Stack(\n            alignment: Alignment.center,\n            children: \u003CWidget>[\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\u002Fpre>\n\u003C\u002Ftd>\n\u003Ctd>\n  \u003Cimg src = \"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Fstk4.png\" width = 200>\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\n\n \u003Ctr>\u003Ctd> \u003Cb>Playing with Positioned\u003C\u002Fb> \u003C\u002Ftd>\u003C\u002Ftr>\n  \u003Ctr>\n\u003Ctd>\n  \u003Cpre> \n  Container(\n        height: 400.0,\n        width: 350.0,\n        \u002F\u002Fcolor: Colors.yellow,\n        child: Padding(\n          padding: const EdgeInsets.all(8.0),\n          child: Stack(\n            alignment: Alignment.center,\n            children: \u003CWidget>[\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\u002Fpre>\n\u003C\u002Ftd>\n\u003Ctd>\n  \u003Cimg src = \"https:\u002F\u002Fgithub.com\u002FPoojaB26\u002FFlutterBasicWidgets\u002Fblob\u002Fmaster\u002Fscreenshots\u002Fstk5.png\" width = 200>\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n  \u003C\u002Ftable>\n\n## TextFields\n  \n### Try TextFields Examples:\n\n\u003Ctable>\u003Ctr>\u003Ctd> \u003Cb>Rounded TextField without Outline\u003C\u002Fb> \u003C\u002Ftd>\u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd>\n      \u003Cpre>\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\u002Fpre>\n    \u003C\u002Ftd>\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F3306366\u002F113850345-faf37280-97b7-11eb-8a2d-f248bc7919d1.png\" width=200>\u003C\u002Ftd>\n \u003C\u002Ftr>  \n \n \u003Ctr>\u003Ctd> \u003Cb>Rounded TextField With Outline\u003C\u002Fb> \u003C\u002Ftd>\u003C\u002Ftr>\n \u003Ctr>\n    \u003Ctd>\n      \u003Cpre>\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\u002Fpre>\n    \u003C\u002Ftd>\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F3306366\u002F113850977-a13f7800-97b8-11eb-931d-a6dded90091f.png\" width=200>\u003C\u002Ftd>\n  \u003C\u002Ftr> \n\u003C\u002Ftable>\n\n## Contributors\nPooja Bhaumik \u003Cbr>\n\n[![Twitter Follow](https:\u002F\u002Fimg.shields.io\u002Ftwitter\u002Ffollow\u002Fpooja_bhaumik.svg?style=social&label=Follow)](https:\u002F\u002Ftwitter.com\u002Fpooja_bhaumik)\n\n\n\n## Getting Started\n\nFor help getting started with Flutter, view our online\n[documentation](https:\u002F\u002Fflutter.io\u002F).\n","该项目旨在帮助Flutter初学者熟悉各种基础组件。通过超过35个可以直接在DartPad中运行的示例，用户能够直观地学习和实践如Text、AppBar等基本组件的使用方法及其属性配置。项目采用Dart语言编写，无需安装任何开发环境或模拟器即可在线体验Flutter编程。非常适合那些刚接触Flutter框架并希望快速上手其核心UI构建元素的学习者。","2026-06-11 03:23:11","top_language"]