flutter icon as background with overflow

user_6439248 0
Viewed 275

I'm trying to recreate the weather app design from this link UI design. However i'm stuck at creating the huge Icon that is overflowing in the background. I tried to use a stack and add an Icon widget with very big size. However, the icon will change its position when the size is changed. So it moves from the center. Any idea on how to get the background result as in the design?

Edit:

I tried the code below. However the icon will move if the screen size of the device changes. Is there away to have this look the same on every screen size?

Stack(
          children: [
            Positioned(
              left: -250,
              top: -100,
              child: Icon(
                Icons.ac_unit,
                size: 900,
                color: Colors.white.withOpacity(0.5),
              ),
            ),

Which gives me the result below. enter image description here

flutter-layout flutter
4 Answers

Using Stack is fine. Did you use Positioned or Align to wrap the Icon widget, to control its position?

For example, your widget hierarchy could be something like: Stack > Align > Icon.

In the Align widget, you can specify how it aligns in the Stack. The values are (x, y) ranging from -1 to +1, with 0 being the center. For example, you can use alignment: Alignment(0, -0.5) to make it center horizontally, and 50% towards the top on the vertical axis.

user_10326130

Use the widget: OverflowBox

The Flutter documentation explains OverflowBox as:

A widget that imposes different constraints on its child than it gets from its parent, possibly allowing the child to overflow the parent.

Example:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Overflow Box',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        backgroundColor: Colors.blue,
        body: Stack(children: [

          OverflowBox(
            // Specify the maxWidth and maxHeight and it works
            // regardless of orientation.
            maxWidth: 800,
            maxHeight: 800,
            child: Icon(
              Icons.ac_unit,
              size: 800,
              color: Colors.black.withAlpha(80),
            ),
          ),
        ]),
      ),
    );
  }
}

Image of the code in action:

Centered large icon using OverflowBox

user_30005030

if you will use Positioned widget, you can actually positioned based on screen height and width and then warp in FractionalTranslation to center it from its given size,

lets calculate with simple way : enter image description here

code :

return Stack(
      children: [
        Positioned(
          left: MediaQuery.of(context).size.width * 0.35,
          top: MediaQuery.of(context).size.height * 0.4,
          child: FractionalTranslation(
              translation: const Offset(-0.5, -0.5),
              child: child()),
        )
      ],
    );
user_153660300

I like the answer that @Tor-Martin Holen suggested, but I would adjust the maxWidth and size attributes to MediaQuery.of(context).size.width to adjust to different screens.

user_134308880
Related