Flutter Core Widgets — Part 1 A developer published a reference guide to the ~50 most-used Flutter widgets, grouped by category. Each entry includes a short description, a runnable code snippet, and a text description of visual output. The guide covers widgets such as Text, RichText, Image, Icon, Container, SizedBox, Placeholder, Row, Column, and Stack. A reference guide to the ~50 most-used Flutter widgets, grouped by category. Each entry includes a short description, a runnable code snippet, and a text description of how it renders on screen since Flutter renders natively, this doc describes the visual output rather than embedding a screenshot . NOTE: if you are using "Open in DartPad" give it time to load, it takes about 5-10 seconds. Displays a string of styled text. Text 'Hello, Flutter ', style: TextStyle fontSize: 24, fontWeight: FontWeight.bold, color: Colors.blue , How it looks: A single line reading "Hello, Flutter " in large, bold, blue lettering. No border or background — just the rendered glyphs. Displays text with multiple styles in one block, via TextSpan children. RichText text: TextSpan text: 'Hello ', style: TextStyle color: Colors.black, fontSize: 20 , children: TextSpan text: 'bold', style: TextStyle fontWeight: FontWeight.bold , TextSpan text: ' world', style: TextStyle fontStyle: FontStyle.italic , , , How it looks: One continuous line — "Hello bold world " — where each segment has a different style, but they all flow together as a single sentence. Displays an image from assets, network, memory, or file. Image.network 'https://picsum.photos/200', width: 200, height: 200, fit: BoxFit.cover, How it looks: A 200×200 pixel square photo, cropped to fill that box exactly no distortion, edges may be cropped . Displays a glyph from an icon font usually Material Icons . Icon Icons.favorite, color: Colors.red, size: 48 How it looks: A solid red heart shape, 48 logical pixels tall, centered in its own bounding box. A general-purpose box for padding, margin, decoration, alignment, and sizing. js Container width: 150, height: 100, padding: const EdgeInsets.all 16 , margin: const EdgeInsets.all 8 , decoration: BoxDecoration color: Colors.amber, borderRadius: BorderRadius.circular 12 , boxShadow: BoxShadow color: Colors.black26, blurRadius: 4, offset: Offset 2, 2 , , child: const Text 'Box' , How it looks: A rounded-corner amber rectangle 150×100 with a soft drop shadow beneath it, and the word "Box" sitting inside with 16px of breathing room on all sides. Forces a child or empty space to an exact width/height. SizedBox width: 100, height: 50, child: Container color: Colors.green How it looks: A flat green rectangle exactly 100 wide by 50 tall — commonly used invisibly no child as fixed spacing between other widgets. A crosshatched box, useful while prototyping layouts before real content exists. Placeholder fallbackWidth: 200, fallbackHeight: 100 How it looks: A 200×100 rectangle with a thin black border and a diagonal "X" drawn corner-to-corner inside it — a visual stand-in for "content goes here." Lays children out horizontally. Row mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: const Icon Icons.star , Icon Icons.star , Icon Icons.star , , How it looks: ★ ★ ★ Three stars spread evenly across the full width of the row, with equal gaps on both sides and between each icon. Lays children out vertically. Same API as Row, opposite axis. Column crossAxisAlignment: CrossAxisAlignment.start, children: const Text 'Line one' , Text 'Line two' , Text 'Line three' , , How it looks: Line one Line two Line three Three lines stacked top to bottom, all left-aligned. Overlaps children on top of one another z-axis layering . Stack alignment: Alignment.center, children: Container width: 150, height: 150, color: Colors.blue , Container width: 100, height: 100, color: Colors.orange , const Text 'Top', style: TextStyle color: Colors.white , , How it looks: A large blue square, with a smaller orange square centered on top of it, and the word "Top" in white text centered above both — three layers visible as one flattened image. Used inside a Stack to pin a child to specific coordinates/edges. Stack children: Container width: 200, height: 200, color: Colors.grey 300 , Positioned top: 10, right: 10, child: Icon Icons.close, color: Colors.red , , How it looks: A large light-grey square with a small red "X" icon pinned to its top-right corner, 10px in from each edge. Inside a Row/Column, forces a child to fill the remaining available space. Row children: Container width: 50, height: 50, color: Colors.red , Expanded child: Container height: 50, color: Colors.blue , , How it looks: A small 50×50 red square on the left, followed immediately by a blue bar that stretches to fill every remaining pixel of the row's width. Like Expanded, but lets the child be smaller than the allotted space FlexFit.loose by default . Row children: Flexible flex: 1, child: Container height: 50, color: Colors.red , Flexible flex: 2, child: Container height: 50, color: Colors.green , , How it looks: Two colored bars side by side spanning the full row width, where the green bar is exactly twice as wide as the red one flex ratio 1:2 . Adds empty space around a single child. js Padding padding: const EdgeInsets.symmetric horizontal: 24, vertical: 8 , child: Text 'Padded text' , How it looks: The text "Padded text" with a wide empty margin on its left and right 24px and a thinner one above/below 8px — the text itself sits inset from wherever this widget is placed. Centers its single child within itself. Center child: Icon Icons.check circle, size: 60, color: Colors.green How it looks: A green checkmark-in-a-circle icon sitting exactly in the middle of the available space, regardless of how large that space is. Like Center, but lets you pick any alignment, not just the middle. Align alignment: Alignment.bottomRight, child: Icon Icons.info, size: 32 , How it looks: A small info icon tucked into the bottom-right corner of its parent's box, with everything above and to the left left empty. Like Row/Column, but automatically flows children onto new lines when space runs out. js Wrap spacing: 8, runSpacing: 8, children: List.generate 8, i = Chip label: Text 'Tag $i' , How it looks: Tag 0 Tag 1 Tag 2 Tag 3 Tag 4 Tag 5 Tag 6 Tag 7 A row of pill-shaped "chip" tags that fills the available width, then automatically wraps remaining chips onto a second line, with even spacing both between chips and between rows. Forces its child into a fixed width/height ratio e.g., 16:9 . AspectRatio aspectRatio: 16 / 9, child: Container color: Colors.black , How it looks: A black rectangle shaped exactly like a widescreen video frame 16:9 — however wide the available space is, the height auto-adjusts to keep that same proportion. Sizes its child as a fraction of the parent's available space. FractionallySizedBox widthFactor: 0.5, heightFactor: 0.3, child: Container color: Colors.purple , How it looks: A purple rectangle that always occupies exactly half the parent's width and 30% of its height — it resizes proportionally if the parent resizes. A scrollable, linear list of widgets. js ListView children: List.generate 20, i = ListTile title: Text 'Item $i' , How it looks: A vertical scrolling column of rows labeled "Item 0" through "Item 19," where only the ones that fit on screen are visible at once and the rest reveal themselves as you scroll down. A scrollable grid of widgets in a fixed number of columns or a max tile extent . js GridView.count crossAxisCount: 3, children: List.generate 9, i = Container margin: const EdgeInsets.all 4 , color: Colors.teal 100 i % 8 + 1 , , How it looks: A 3×3 grid of evenly sized teal-toned squares, each with a small gap between neighbors, filling the screen edge-to-edge. Makes a single usually tall child scrollable, when it doesn't fit on screen. js SingleChildScrollView child: Column children: List.generate 15, i = Container height: 80, color: Colors.blueGrey 100 + i 50 % 400 , , How it looks: A tall column of stacked colored bands, taller than the screen — the top portion is visible initially, and the whole thing scrolls up to reveal the rest. Full-screen or full-width pages you swipe between horizontally. PageView children: Container color: Colors.red , Container color: Colors.green , Container color: Colors.blue , , How it looks: One solid-colored full-screen page at a time red, then green, then blue , with a horizontal swipe gesture sliding the next page in from the edge. A standard single-row list item with optional leading/trailing icons and subtitle. ListTile leading: Icon Icons.person , title: Text 'Jane Doe' , subtitle: Text 'jane@example.com' , trailing: Icon Icons.arrow forward ios , How it looks: A single horizontal row: a person icon on the far left, "Jane Doe" in bold-ish title text with a smaller grey " jane@example.com mailto:jane@example.com " beneath it, and a small chevron arrow on the far right — the classic settings-menu row look. Wraps a scrollable widget to show a draggable scrollbar track. Scrollbar thumbVisibility: true, child: ListView children: List.generate 30, i = ListTile title: Text 'Row $i' , How it looks: The same scrolling list as ListView , but with a thin vertical grey bar running down the right edge of the screen, whose length and position indicate how far through the list you've scrolled. A filled, raised button — the primary call-to-action button. js ElevatedButton onPressed: {}, child: const Text 'Submit' , How it looks: A solid-colored pill/rounded-rectangle button theme color, usually a shade of blue or purple with white "Submit" text centered inside, and a subtle shadow that makes it look slightly raised off the page. A flat, text-only button with no background or shadow. js TextButton onPressed: {}, child: const Text 'Cancel' , How it looks: Just the word "Cancel" in the theme's accent color, sitting flush against the page background — no border, no fill, no shadow. Tapping shows a faint ripple. Like TextButton, but with a visible border outline. js OutlinedButton onPressed: {}, child: const Text 'Learn More' , How it looks: A rounded-rectangle button with a thin colored border and transparent/matching-background fill, with "Learn More" text in the same accent color inside it. A tappable icon with built-in ripple/highlight feedback. IconButton icon: Icon Icons.thumb up , onPressed: {}, How it looks: A plain thumbs-up icon sitting by itself; tapping it shows a soft circular ripple radiating from the icon, but there's no visible button "chrome" otherwise. A circular, elevated button typically anchored to a screen's bottom-right corner. js FloatingActionButton onPressed: {}, child: const Icon Icons.add , How it looks: A solid-colored circle usually accent-colored with a white "+" icon centered inside, floating above the rest of the page content with a visible drop shadow — the classic "add new item" button. An icon often three dots that reveals a dropdown menu of options when tapped. js PopupMenuButton