【问题标题】:How to fix size and position of background image in flutter?如何在颤动中固定背景图像的大小和位置?
【发布时间】:2021-12-11 16:40:45
【问题描述】:
Widget build(BuildContext context){
    var height2 = AppBar().preferredSize.height;
    return Scaffold(
      backgroundColor: Colors.white,
      body: Stack(
        children: <Widget>[
          Image(
              image: AssetImage("assets/oral_structure.png"),
              fit: BoxFit.fill
          ),
          Padding(
          padding: EdgeInsets.only(top:100, left: 100),
          child: Container(
              height: 60,
              width: 60,
              child: FlatButton(
                child: Text('ㅂ', style: TextStyle(fontSize: 30,fontWeight: FontWeight.bold)),

                onPressed: (){
                  Navigator.push(context, MaterialPageRoute(builder: (context) => B()),);
                },
              )
          ),
          ),

以上是我的代码的一部分。我正在制作的应用程序是将适当的按钮放置在背景图像顶部的位置。但是,如果您进行上述代码,则按钮的位置和图像的位置会根据智能手机的屏幕尺寸而有所不同。固定高度和宽度也是如此。怎么没有办法?

【问题讨论】:

    标签: flutter flutter-layout flutter-widget


    【解决方案1】:
    @override
    Widget build(BuildContext context) {
        
        return Scaffold(
            key: v.scaffoldKey,
            body: Stack(
                children: [
                getBackgroundLight(),
                ],
            ),
        );
    } 
    
    Widget getBackgroundLight() {
        return Stack(
            children: [
            Image.asset('assets/background.jpg', width: double.infinity),
            Transform.rotate(
                angle: -SizeConfig.calculateBlockVertical(180) *
                  (math.pi / SizeConfig.calculateBlockVertical(180)),
                  child: Container(
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        begin: Alignment.center,
                        end: Alignment.bottomCenter,
                        colors: [
                        Get.theme.scaffoldBackgroundColor,
                        Get.theme.scaffoldBackgroundColor.withOpacity(0.5),
                        ],
                      ),
                    ),
                  ),
                ),
            ],
        );
    }
    

    【讨论】:

    • 虽然此代码可以解决问题,including an explanation 说明如何以及为什么解决问题将真正有助于提高您的帖子质量,并可能导致更多的赞成票。请记住,您正在为将来的读者回答问题,而不仅仅是现在提问的人。请edit您的答案添加解释并说明适用的限制和假设。
    猜你喜欢
    • 1970-01-01
    • 2014-10-26
    • 1970-01-01
    • 1970-01-01
    • 2021-06-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-08-17
    相关资源
    最近更新 更多