flutter 因此,我需要知道如何在屏幕上的文本字段和按钮之间提供间距

flseospp  于 2023-01-18  发布在  Flutter
关注(0)|答案(5)|浏览(153)

因此,基本上我面临的问题是,我需要提供等量的间距,从左侧和右侧的屏幕
我的文件的代码附在下面的代码是在Flutter

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';

class PhoneNumberDetails extends StatefulWidget {
  const PhoneNumberDetails({super.key});

  @override
  State<PhoneNumberDetails> createState() => _PhoneNumberDetailsState();
}

class _PhoneNumberDetailsState extends State<PhoneNumberDetails> {
  TextEditingController countryCode = TextEditingController();
  @override
  void initState() {
    // TODO: implement initState
    countryCode.text = '+91';
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Verify Number',
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
      ),
      body: Container(
        alignment: Alignment.center,
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.asset(
                'assets/otpimage.png',
                height: 150,
                width: 150,
              ),
              Text(
                'Phone Verification',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              ),
              SizedBox(
                height: 10,
              ),
              Text('Please enter your mobile number to get started'),
              SizedBox(
                height: 25,
              ),
              Container(
                height: 55,
                decoration: BoxDecoration(
                  border: Border.all(width: 1, color: Colors.grey),
                  borderRadius: BorderRadius.circular(5),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    SizedBox(
                      width: 10,
                    ),
                    SizedBox(
                      width: 40,
                      child: TextField(
                        controller: countryCode,
                        keyboardType: TextInputType.number,
                        decoration: InputDecoration(
                          border: InputBorder.none,
                        ),
                      ),
                    ),
                    Text(
                      "|",
                      style: TextStyle(fontSize: 33, color: Colors.grey),
                    ),
                    SizedBox(
                      width: 10,
                    ),
                    Expanded(
                      child: TextField(
                        keyboardType: TextInputType.phone,
                        decoration: InputDecoration(
                          border: InputBorder.none,
                          hintText: "Phone",
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(
                height: 20,
              ),
              SizedBox(
                width: double.infinity,
                height: 45,
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.green.shade600,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10),
                    ),
                  ),
                  child: Text('Send Code'),
                  onPressed: () {
                    Navigator.pushNamed(context, 'verify');
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

基本上我需要以下列方式输出
此代码的输出为:

a64a0gku

a64a0gku1#

您可以在支架主体上包含填充。当您使用容器小部件时,您可以使用它的填充。

body: Container(
        alignment: Alignment.center,
        padding: EdgeInsets.all(16), //this
        child: SingleChildScrollView(
          child: Column(
gopyfrb3

gopyfrb32#

将您的RowElevatedButton Package 在Padding

Padding(
    padding: EdgeInsets.only(horizontal:16.0),
    child: Row(...),
  ),
Padding(
    padding: EdgeInsets.only(horizontal:16.0),
    child:ElevatedButton(...)
 )
toe95027

toe950273#

使用填充小部件:

Padding(
      padding: const EdgeInsets.all(8.0),
      child: "YOUR WIDGET",
),
elcex8rz

elcex8rz4#

ContainerSingleChildScrollView添加填充,如下所示

Container(
// padding: EdgeInsets.all(16), or use this
          alignment: Alignment.center,
          child: SingleChildScrollView(
          padding: EdgeInsets.all(16),
            child: Column(),
    ),
  ),

您的搜索结果-〉x1c 0d1x

kqqjbcuj

kqqjbcuj5#

只需将您的RowElevatedButton包裹在Padding内即可。

相关问题