如何在 flutter 中移动图像顶部底部

Question

我试图制作这个页面，但最后这个设计并没有转移到最后一个底部，我试过填充，但这看起来不太好，我也试过定位小部件，但它显示一些错误请有人告诉如何我可以将该设计移到最后，这是我的 git 存储库： https://github.com/cryptic-exe/Otp_verfication这是我的代码：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String dropdownValue = 'English';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: Column(
              children: [
                Icon(
                  Icons.photo_outlined,
                  size: 100.0,
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 40.0),
                  child: Text(
                    'Please Select Your Language',
                    style: TextStyle(
                        fontWeight: FontWeight.bold, fontSize: 20.0),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 20),
                  child: Text(
                    'You can change the language \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t at any time',
                    style: TextStyle(
                        fontWeight: FontWeight.w300, fontSize: 15.0),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 9.0),
                  child: Container(
                    width: 200,
                    padding: const EdgeInsets.only(left: 10.0, right: 10.0),
                    decoration: BoxDecoration(
                      border: Border.all(),
                    ),
                    child: DropdownButton<String>(
                      value: dropdownValue,
                      icon: const Icon(Icons.arrow_drop_down_outlined),
                      isExpanded: true,
                      iconSize: 30,
                      elevation: 16,
                      style: const TextStyle(color: Colors.black),
                      onChanged: (String? newValue) {
                        setState(() {
                          dropdownValue = newValue!;
                        });
                      },
                      items: <String>[
                        'English',
                        'Hindi',
                        'French',
                        'Spanish',
                        'Russian',
                        'Arabic'
                      ].map<DropdownMenuItem<String>>((String value) {
                        return DropdownMenuItem<String>(
                          value: value,
                          child: Text(
                            value,
                            style: TextStyle(
                                fontSize: 20,
                                letterSpacing: 0.9,
                                fontWeight: FontWeight.w300),
                          ),
                        );
                      }).toList(),
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(20.0),
                  child: Container(
                    width: 200,
                    padding: const EdgeInsets.only(left: 10.0, right: 10.0),
                    decoration: BoxDecoration(
                      color: Colors.deepPurple,
                      border: Border.all(),
                    ),
                    child: TextButton(
                      onPressed: () {},
                      child: Text(
                        'NEXT',
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 20.0,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0.9),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
          Stack(
            children: [
              Positioned.fill(
                child: Container(
                  width: 393,
                  child: Image(
                    image: AssetImage('Images/design2.png'),
                    fit: BoxFit.fill,
                  ),
                ),
              ),
              Positioned(
                child: Container(
                  width: 393,
                  child: Image(
                    image: AssetImage('Images/design1.png'),
                    colorBlendMode: BlendMode.overlay,
                    fit: BoxFit.fill,
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Answer 1

您可以使用bottomSheet放置图像。

在 Scaffold 中添加以下代码

bottomSheet: Container(
  width: double.infinity,
  child: Image(
    image: AssetImage('Images/design1.png'),
    colorBlendMode: BlendMode.overlay,
    fit: BoxFit.fill,
  ),
),

Answer 2

您还可以使用垫片将内容向下推

https://api.flutter.dev/flutter/widgets/Spacer-class.html

在手机上，所以我不能提供片段