ℹ️ Select 'Choose Exercise', or randomize 'Next Random Exercise' in selected language.

Choose Exercise:
Timer 00:00
WPM --
Score --
Acc --
Correct chars --

Custom Widget Layouts: Stack and Positioned

Dart

Goal -- WPM

Ready
Exercise Algorithm Area
1import 'package:flutter/material.dart';
2
3void main() {
4runApp(const MyApp());
5}
6
7class MyApp extends StatelessWidget {
8const MyApp({super.key});
9
10@override
11Widget build(BuildContext context) {
12return MaterialApp(
13title: 'Stack Layout Demo',
14theme: ThemeData(primarySwatch: Colors.blue),
15home: const StackLayoutScreen(),
16);
17}
18}
19
20class StackLayoutScreen extends StatelessWidget {
21const StackLayoutScreen({super.key});
22
23@override
24Widget build(BuildContext context) {
25return Scaffold(
26appBar: AppBar(title: const Text('Stack and Positioned Layout')), // App bar for the screen.
27body: Center(
28child: Container(
29width: 300, // Width of the main container.
30height: 300, // Height of the main container.
31color: Colors.lightBlueAccent.shade100, // Background color of the container.
32child: Stack(
33// The Stack widget allows children to be layered on top of each other.
34children: [
35// Background element (optional, could be another widget or just the container's color).
36// For this example, the container's color serves as the background.
37
38// Main content: A simple text message.
39const Center(
40child: Text(
41'Main Content Area',
42style: TextStyle(fontSize: 20, color: Colors.black54),
43),
44),
45
46// Positioned Avatar Image.
47// Positioned widgets must be children of a Stack.
48Positioned(
49bottom: 20, // Position 20 pixels from the bottom edge of the Stack.
50right: 20, // Position 20 pixels from the right edge of the Stack.
51child: CircleAvatar(
52radius: 40, // Radius of the circular avatar.
53backgroundImage: NetworkImage('https://via.placeholder.com/150/FF5733/FFFFFF?text=User'), // Placeholder image.
54backgroundColor: Colors.white, // Background color for the avatar.
55),
56),
57
58// Positioned Notification Badge.
59Positioned(
60// Position it relative to the avatar.
61top: 10, // 10 pixels from the top edge of the Stack.
62left: 180, // 180 pixels from the left edge of the Stack.
63child: Container(
64width: 24, // Width of the notification badge.
65height: 24, // Height of the notification badge.
66decoration: BoxDecoration(
67color: Colors.redAccent, // Red color for the badge.
68shape: BoxShape.circle, // Make the badge circular.
69border: Border.all(color: Colors.white, width: 2), // White border.
70),
71child: const Center(
72child: Text(
73'3',
74style: TextStyle(color: Colors.white, fontSize: 12, fontWeight: FontWeight.bold), // Text style for the badge count.
75),
76),
77),
78),
79],
80),
81),
82),
83);
84}
85}
Algorithm description viewbox

Custom Widget Layouts: Stack and Positioned

Algorithm description:

This Flutter example demonstrates how to use `Stack` and `Positioned` widgets to create a layered layout. A `Stack` widget allows its children to be placed on top of each other. `Positioned` widgets are used as children of `Stack` to precisely control the position of elements within the stack using properties like `top`, `bottom`, `left`, and `right`. This is ideal for overlaying elements, such as placing a notification badge over a user avatar.

Algorithm explanation:

The `StackLayoutScreen` uses a `Container` as its main visual area. Inside this container, a `Stack` widget is used. The `Stack` widget's children are rendered in the order they appear in the list. The first child is a `Center` widget displaying 'Main Content Area'. Subsequent children are `Positioned` widgets. The first `Positioned` widget places a `CircleAvatar` 20 pixels from the bottom and 20 pixels from the right of the `Stack`. The second `Positioned` widget places a circular `Container` (acting as a notification badge) 10 pixels from the top and 180 pixels from the left of the `Stack`. The `Positioned` widget's properties (`top`, `bottom`, `left`, `right`) define the offset from the edges of the `Stack`. The time complexity for rendering a `Stack` with `Positioned` widgets is generally O(N), where N is the number of children, as each child needs to be laid out. Space complexity is O(N) to store the widget tree. Edge cases include handling overflow if positioned elements extend beyond the `Stack`'s bounds or if the `Stack` itself is not constrained.

Pseudocode:

Create a `Scaffold` with an `AppBar`.
In the `body` of the `Scaffold`:
  Use a `Center` widget to center the main layout.
  Inside `Center`, use a `Container` with specified `width`, `height`, and `color`.
  Inside the `Container`, use a `Stack` widget.
  Add children to the `Stack` in order of layering:
    First child: A widget for the base content (e.g., `Center` with `Text`).
    Second child: A `Positioned` widget:
      Set `bottom` and `right` properties to define its position.
      Its `child` is a `CircleAvatar` with a `radius` and `backgroundImage`.
    Third child: Another `Positioned` widget:
      Set `top` and `left` properties to define its position.
      Its `child` is a `Container` with `width`, `height`, `decoration` (circular shape, color, border), and a `child` `Text` widget for the count.