Как выровнять виджет внутри стека по разным размерам экрана во флаттере

Question

Привет, я застрял в маленькой проблеме. Я хочу выровнять свою плавающую кнопку на экране внутри виджета стека. То, что я не могу сделать, это настроить его динамически в соответствии с размером экрана различных мобильных телефонов. Если я выровняю его в нужном месте в моем эмуляторе, когда вы запустите его на моем устройстве, он разойдется от своего исходного положения. Я использовал виджет Positioned () со свойствами top:, right :, et c, также пробовал Container () с виджетом margin: property и Align (), но, похоже, ничего не работает. ниже скриншоты, которые могут помочь и код, а также.

return Scaffold(
  body: Stack(
    children: <Widget>[
      ....
     Container(
        margin: EdgeInsets.only(bottom: 277, right: 10),
        alignment: Alignment.bottomRight,
        child: showFloatingBtn2 ? SpeedoMeterFloatingBtn() : SizedBox(),
      ),
    ],
  ),
);

Если вы видите изображение 1, вы увидите красную плавающую кнопку моя проблема в том, что когда я размещаю его на месте, как на изображении 2 на эмуляторе, он не выравнивается на моем устройстве, и наоборот. Я не могу понять, как это исправить. любая помощь будет принята с благодарностью. Заранее спасибо.

ПРИМЕЧАНИЕ. Изображение 1 с основанием: 227 на эмуляторе, а изображение2 с низом: 277 на эмуляторе.

Answer 1

вы можете использовать пакет утилит экрана https://pub.dev/packages/flutter_screenutil

это лучший пакет для работы с несколькими экранами, он просто делает все экраны повторяющимися, а затем с помощью простых расширений вы можете указать ширина высота или размер текста, и он будет масштабироваться до разных экранов без проблем [возможно, небольшие проблемы]

вам нужно только инициализировать его в вашем методе сборки [для каждого маршрута, который я думаю], как этот

// значение по умолчанию: ширина: 1080px, высота: 1920px, allowFontScaling: false

ScreenUtil.init(context);

я рекомендую установить dart sdk в 2.7 в вашем пабсе c .yaml, чтобы использовать функции расширения

environment:
  sdk: ">=2.7.0 <3.0.0"

чтобы иметь возможность сделать это

Container(
width: 50.w,
height:200.h
)

читайте больше в документации и попробуйте это круто

Answer 2

Я не уверен, что это то, что вам нужно, но вы можете попробовать использовать виджет Transform.translate в вашем стеке, чтобы немного сместить кнопку со значком

Посмотрите пример здесь https://dartpad.dartlang.org/59a39d191234f84cd250fafded43cfda

Таким образом, независимо от разрешения экрана, кнопка всегда будет на краю нижней карты.

Полный пример:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DemoPage(),
    );
  }
}


class DemoPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Positioned.fill(
            child: Image.network(
              'https://upload.wikimedia.org/wikipedia/commons/3/3a/Official_New_York_City_Subway_Map_vc.jpg',
              fit: BoxFit.cover,
            ),
          ),
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: Stack(
              children: <Widget>[
                Container(
                  color: Colors.white,
                  child: Column(
                    children: <Widget>[
                      SizedBox(height: 30),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Icon(
                            Icons.keyboard_arrow_left,
                          ),
                          Text(
                            '45',
                            style: TextStyle(fontSize: 30),
                          ),
                          Icon(
                            Icons.keyboard_arrow_right,
                          ),
                        ],
                      ),
                      Container(
                        height: 150,
                        child: Placeholder(),
                      )
                    ],
                  ),
                ),
                Align(
                  alignment: AlignmentDirectional.centerEnd,
                  child: Transform.translate(
                    offset: Offset(0, -20),
                    child: FlatButton(
                      child: Icon(Icons.play_arrow, size: 28),
                      shape: CircleBorder(),
                      color: Colors.red,
                      onPressed: () {},
                    ),
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}