因此,基本上我面临的问题是,我需要提供等量的间距,从左侧和右侧的屏幕
我的文件的代码附在下面的代码是在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');
},
),
),
],
),
),
),
);
}
}
基本上我需要以下列方式输出
此代码的输出为:
5条答案
按热度按时间a64a0gku1#
您可以在支架主体上包含填充。当您使用容器小部件时,您可以使用它的填充。
gopyfrb32#
将您的
Row
和ElevatedButton
Package 在Padding
中toe950273#
使用填充小部件:
elcex8rz4#
向
Container
或SingleChildScrollView
添加填充,如下所示您的搜索结果-〉x1c 0d1x
kqqjbcuj5#
只需将您的
Row
和ElevatedButton
包裹在Padding
内即可。