Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to Perfectly Positioned the Widgets on every screen size

How to perfectly Positioned the widgets on screen which will perfectly fits on every screen size. I want to achieve this design. It is designed by the designer and I want to implement it in flutter

enter image description here

I will use the below Image which will be the background of my Screen and the text will be dynamic coming from backend and will be placed perfectly on its place. any Idea how to achieve it and will be perfect on every screen size.

Background

I used sizer package and Stack to place each widget on its place below is my code

 return Stack(
      children: [
        // if (!_showSlider || (_slideFileList.length == 0))
        const Image(
          image: AssetImage("assets/new_layout_02.png"),
          fit: BoxFit.contain,
          width: double.infinity,
          opacity: AlwaysStoppedAnimation<double>(0.7),
        ),

        /// Prayer Time
        Positioned(
          bottom: 24.w,
          left: 22.h,
          child: const FajarPayerTimeWidget(),
        ),

        /// Friday Salah Time
        Positioned(
          bottom: 0,
          right: 6.9.w,
          width: 54.w,
          child: const FridaySalahTimeWidget(),
        ),

        /// Donation
        Positioned(
          bottom: 10.w,
          right: 7.h,
          child: DonationWidget(
            donateLink: widget.donateLink,
          ),
        ),

        /// Sunrise and Sunset Time
        Positioned(
          top: 7.w,
          right: 5.5.h,
          child: SunRiseSunSetTime(
            lat: widget.lat,
            long: widget.long,
            offset: widget.offset,
          ),
        ),

        Positioned(
          left: 8.h,
          top: 7.w,
          child: const Header(),
        ),

        Positioned(
          top: 25.w,
          right: 5.5.h,
          child: const DateTimeWidget(),
        ),

        Positioned(
          right: 0,
          bottom: 17.3.h,
          child: const NextIqamahWidget(),
        ),        
      ],
    );

Its is working fine on the device I am developing on. When I run the app on different device the layout is not looking good.

Tags:

2

Answers


  1. 0 
    final size = MediaQuery.sizeOf(context);

    Using media query, if the position has end size.width > 600 then its view will be different.

    Login or Signup to reply.
  2. 0

    I do like this It work on every devices
    the factor i got from compare between 2 container
    first one defined width and height by normal pixel
    second one defined by sizer
    I try to made it in the same size as much as possible and then calculate by (normalPixel / sizer (percent of device screen))

    /*-----------------------------
This factor base on Iphone15 Pro Max Deviced
************ Attention *****************
use sizing(num) in case of sqaure widget (same width same height in every device) || resHeight(num) for both width and height
-------------------------------*/

const _heightFactor = 9.320388349514563;
const _widthFactor = 4.285714285714286;

double resWidth(num width) {
  return (width / _widthFactor).w;
}
double resHeight(num height) {
  return (height / _heightFactor).h;
}

double sizing(num height) {
  return (height).sp;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search