试图为新手机应用程序开发此屏幕

Question

大家好，我正在试图开发一个扑朔迷离的应用程序，但似乎无法超越第一个屏幕。任何人都可以帮助吗？

堆栈溢出不允许我发布图像，因此您现在有一个链接

该链接显示我要实现的目标

第二个链接显示了我当前拥有的...

这是我目前拥有的

我的代码：

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() => runApp(const pantallaPrincipal());


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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ASA',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.

      ),
      home: const MyHomePage(title: 'Conectado'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
        body: Center(
          child: Container(
            color: Color.fromRGBO(51, 189, 175, 100),
            child: Container(
                color: Color.fromRGBO(98, 138, 134, 60),
                margin: new EdgeInsets.only(bottom: 100),
                child: Image.asset('IMG/Group 70.png'),
            )
          ),
        )
    );// This trailing comma makes auto-formatting nicer for build methods.
  }
}

我能提供的所有帮助将不胜感激

Answer 1

正如Guilherme Gabanelli建议的那样，请尝试查看行和列还检查堆栈小部件的工作方式，随着越来越多的设计，您设计的小部件会为您提供清晰的信息。

Answer 2

您需要拉伸包裹图像的容器以匹配设备的高度和宽度。这样做

return Scaffold(
        body: Container(
          height: double.infinity
          width: double.infinity
          child: Container(
            color: Color.fromRGBO(51, 189, 175, 100),
            child: Container(
                color: Color.fromRGBO(98, 138, 134, 60),
                margin: new EdgeInsets.only(bottom: 100),
                child: Image.asset('IMG/Group 70.png', fit: BoxFit.cover),
            )
          ),
        )
    );

仅是为了使用图像覆盖的整个屏幕。如果您自己添加颜色和事物，那么如其他人建议的那样，您需要查看行和列的概念。

行可以垂直放置在另一个上方或下方的1个小部件。您可以将尽可能多的具有颜色或任何小部件的容器彼此放置。

该列水平进行相同的事情。一个小部件并排到另一个小部件。您可以放置​​任何数量的小部件。

希望这有帮助:)