So Basically the issue i am facing is I need to provide equal amount of spacing from the left side and the right side of the screen
The code of my file is attached below the code is in 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');
},
),
),
],
),
),
),
);
}
}
Basically i need the output in the following way
The output of this code is:
5
Answers
You can include padding on the scaffold body. while you are using Container widget, you can use padding of it.
Wrap your
Row
andElevatedButton
insidePadding
Use Padding Widget :
Add Padding to Your
Container
orSingleChildScrollView
like belowYour Result->
Simply Wrap your
Row
andElevatedButton
inside aPadding
.