Flutter Dart：根据屏幕在背景图像上设置文本答案

【问题标题】：Flutter Dart: Set text on background image according to screenFlutter Dart：根据屏幕在背景图像上设置文本
【发布时间】：2021-08-27 05:54:03
【问题描述】：

我想按照设计图片中提供的方式设置文本，但我的背景图像上显示了文本，我无法相应地设置它.. 我尝试过其他方法，例如将“容器”放在顶部，然后在下面应用脚手架，但它也没有用...... 或者是否有任何文本属性，如“边距”，以相应地为文本和其他组件添加边距.. 这是我的代码：

return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
                height: size.height * 1,
                width: size.width * 1,
                decoration: BoxDecoration(
                  image: DecorationImage(
                      image: AssetImage('images/bg.png'), fit: BoxFit.cover),
                ),
                child: Column(
                  children: [
                    Text(
                      
                      ('Kleine.'),
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold,
                        
                      ),
                      textAlign: TextAlign.center,
                    
                    ),
Text(
//code 
),
                  ],
                )),
          ],
        ),
      ),
    );
```[![This is what I want][1]][1]
[![This is what I am getting "keline" on top][2]][2]


  [1]: https://i.stack.imgur.com/9kpK5.png
  [2]: https://i.stack.imgur.com/f4aIX.png
I want my text and other widgets to justify accordingly just as given in the provided image.

【问题讨论】：

你能发一张你的结果图片吗？ ...我没有得到你的问题
@Why_So_Ezz 请检查

标签： flutter dart flutter-layout flutter-test

【解决方案1】：

您应该在脚手架主体中使用 Stack 小部件，并在子项中首先添加图像，然后为所有文本和文本字段添加具有适当填充和大小框的列。

【讨论】：

【解决方案2】：

为此目的使用Stack 小部件，并根据您的要求使用positioned 或Align 小部件来设置文本或图像

示例代码

class _LoginScreenState extends State<LoginScreen> {

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return SafeArea(
      child: Scaffold(
        key: _scaffoldKey,
        resizeToAvoidBottomInset: true,
        body: SingleChildScrollView(
          child: Stack(
            children:<Widget> [
              Center(
                child: new Image.asset(
                  'assets/images/Login BG.png',
                  width: size.width,
                  height: size.height,
                  fit: BoxFit.fill,
                ),
              ),
              Positioned(
                top: size.height/4.5,
                left: size.width/7,
                right: size.width/7,
                child: Image.asset(
                  "assets/Logo.png",
                  height: 200,
                  width: 200,
                ),
              ),
              Positioned(
                top: size.height/2.2,
                left: size.width/11,
                right: size.width/11,
                child: Container(
                  height: 60,
                  width: 320,
                  child: TextFormField(
                    controller: _textLoginUserMnameController,
                    decoration: InputDecoration(labelText: 'Username'),
                  ),
                ),
              ),
              Positioned(
                top: size.height/1.8,
                left: size.width/11,
                right: size.width/11,
                child: Container(
                  height: 60,
                  width: 320,
                  child: TextFormField(
                    controller: _textLoginUserpasswordController,
                    keyboardType: TextInputType.visiblePassword,
                    obscureText: true,
                    decoration: InputDecoration(labelText: 'Password'),
                  ),
                ),
              ),
              Positioned(
                top: size.height/1.4,
                left: size.width/5,
                right: size.width/5,
                child: GestureDetector(
                  child: Container(
                    height: 45,
                    width: 160,
                    child: Center(
                      child: Text("Sign in"),
                    ),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      gradient: new LinearGradient(
                        colors: [
                       Color.fromARGB(255, 45, 120, 234),
                       Color.fromARGB(255, 89, 149, 240)
                        ],
                      ),
                    ),
                  ),
                  onTap: () {

            //Login
                  },
                ),
              ),
            ],
          ),
        )
      ),
    );
  }

【讨论】：