Flutter Validation Error Message Position - flutter

I'm trying to get the image in the picture. However, the problem is: I can't show the error message below the line. When I show the error message, it looks like this and gives an error.
What properties can I use to achieve this to get the image in the design? I would be glad if you help
Can we change the position of the error message in Flutter? Can you help me with this?
DESIGN;
My Code:
Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Telefon Numarası',
style: TextStyle(color: Colors.grey),
),
Container(
decoration: const BoxDecoration(
border: Border(bottom: BorderSide(width: 1, color: Colors.grey))
),
child: Stack(
children: [
Positioned(
bottom: 10,
top: 10,
left: 0,
child: Container(
height: 30,
width: 80,
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.circular(5),
),
child: Row(
children: const [
Spacer(),
Icon(CupertinoIcons.chevron_down, size: 16,),
SizedBox(width: 5,),
],
),
),
),
SizedBox(
height: 50,
child: InternationalPhoneNumberInput(
hintText: 'Telefon Numarası',
onInputChanged: (PhoneNumber number) {
print(number.phoneNumber);
},
onInputValidated: (bool value) {
print(value);
},
ignoreBlank: false,
autoValidateMode: AutovalidateMode.disabled,
selectorTextStyle: const TextStyle(
color: Colors.black,
),
selectorConfig: const SelectorConfig(
selectorType: PhoneInputSelectorType.BOTTOM_SHEET,
setSelectorButtonAsPrefixIcon: false,
leadingPadding: 10,
showFlags: false,
trailingSpace: true,
),
initialValue: PhoneNumber(isoCode: 'TR'),
textFieldController: TextEditingController(),
formatInput: false,
keyboardType: TextInputType.numberWithOptions(
signed: true, decimal: true),
inputDecoration: const InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent)
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent)
),
floatingLabelAlignment: FloatingLabelAlignment.start,
// labelText: 'Telefon Numarası',
),
textStyle: const TextStyle(color: Colors.black),
onSaved: (PhoneNumber number) {
print('On Saved: $number');
},
),
),
],
),
),
],
),
),
MY OUTPUT;
here the error message should come under the line at the bottom

Related

How to add border shadow to a TextField in Flutter

how to add border or elevation to a textfield in flutter
I wanted to give a shadow to my text field.
After some digging i found the answer to my question.
here is my code :
// This is a single TextField
// Wrap your TextField around Material Widget and give border radius and // elevaiton to Material Widget.
Padding(
padding: const EdgeInsets.only(left: 16, right: 16, bottom: 8),
child: Container(
height: 50,
width: 250,
child: Material(
borderRadius: BorderRadius.circular(20),
elevation: 8,
child: TextField(
decoration: InputDecoration(
labelText: 'First Name',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20)
)
),
),
),
),
),
Blockquote
// IF YOU WANT TO USE THE DESIGN IN THE IMAGE THEN USE THIS CODE ://
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:signup_figma/Screens/signin_personal_details_screen.dart';
import '../Widgets/otp_pin_input_field.dart';
class SignUpScreen extends StatefulWidget {
const SignUpScreen({Key? key}) : super(key: key);
#override
State<SignUpScreen> createState() => _SignUpScreenState();
}
class _SignUpScreenState extends State<SignUpScreen> {
bool mobileNumberVerify = false;
bool emailVerify = false;
bool checkBoxValue = false;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(8.0),
child: ListView(
children: [
SizedBox(
child: Padding(
padding: const EdgeInsets.only(top: 60, left: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
/////// SignUp///////////
Text(
"Sign up",
style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 25),
),
SizedBox(
height: 8,
),
Text(
"Create an account to get started",
style: TextStyle(fontSize: 18),
),
SizedBox(
height: 20,
)
],
),
),
),
Padding(
padding: const EdgeInsets.only(left: 16, right: 16, bottom: 8),
child: Container(
height: 50,
width: 250,
child: Material(
borderRadius: BorderRadius.circular(20),
elevation: 8,
child: TextField(
decoration: InputDecoration(
labelText: 'First Name',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20)
)
),
),
),
),
),
Padding(
padding:
const EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 8),
child: Container(
height: 50,
width: 250,
child: Material(
borderRadius: BorderRadius.circular(20),
elevation: 8,
child: TextFormField(
decoration: InputDecoration(
// fillColor: Colors.white,
// filled: true,
labelText: 'Last Name',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20)),
),
),
),
),
),
Padding(
padding:
const EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 8),
child: SizedBox(
width: 250,
height: 50,
child: Material(
borderRadius: BorderRadius.circular(20),
elevation: 8,
child: TextField(
keyboardType: TextInputType.number,
decoration: InputDecoration(
labelText: 'Mobile Number',
suffixIcon: Padding(
padding: EdgeInsets.only(right: 15, top: 15),
child: InkWell(
onTap: () {
print("Clicked");
setState(() {
mobileNumberVerify = true;
});
},
child: Text("verify")),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20))),
),
),
),
),
Padding(
padding:
const EdgeInsets.only(left: 36, right: 16, top: 8, bottom: 8),
child: SizedBox(
child: Text(
"Resend OTP",
style: TextStyle(color: Colors.deepPurpleAccent),
),
),
),
mobileNumberVerify
? OtpPinInputField()
: SizedBox(
height: 2,
),
Padding(
padding:
const EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 8),
child: SizedBox(
width: 250,
height: 50,
child: Material(
borderRadius: BorderRadius.circular(20),
elevation: 8,
child: TextField(
decoration: InputDecoration(
labelText: ' Email',
suffixIcon: Padding(
padding: EdgeInsets.only(right: 15, top: 15),
child: InkWell(
onTap: () {
print("Clicked");
setState(() {
emailVerify = true;
});
},
child: Text("verify")),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20))),
),
),
),
),
const Padding(
padding:
EdgeInsets.only(left: 36, right: 16, top: 8, bottom: 8),
child: SizedBox(
child: Text(
"Resend OTP",
style: TextStyle(color: Colors.deepPurpleAccent),
),
),
),
emailVerify
? OtpPinInputField()
: SizedBox(
height: 2,
),
Row(
children: [
Checkbox(
value: checkBoxValue,
onChanged: (value) {
setState(() {
this.checkBoxValue = value!;
});
}),
Container(
width: 320,
child: RichText(
text: const TextSpan(
children: <TextSpan>[
TextSpan(
text: "I've read and agree with the ",
style: TextStyle(color: Colors.black)),
TextSpan(
text: 'Terms & Conditions, Privacy Policy',
style: TextStyle(color: Colors.deepPurpleAccent)),
TextSpan(text: ' & '),
TextSpan(
text: 'End User License Agreement',
style: TextStyle(color: Colors.deepPurpleAccent)),
],
),
),
),
],
),
Padding(
padding: const EdgeInsets.all(8.0),
child: MaterialButton(
height: 50,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PersonalDetailsScreen()),
);
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(11)),
color: Colors.deepPurpleAccent,
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PersonalDetailsScreen()),
);
},
child: const Text(
"Register",
style: TextStyle(color: Colors.white),
),
),
),
)
],
),
),
);
}
}
Blockquote
Create a file otpPininputfield.dart and paste this code :
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class OtpPinInputField extends StatelessWidget {
const OtpPinInputField({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Form(
child: Padding(
padding: const EdgeInsets.only(left: 35,right: 40),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
SizedBox(
height: 45,
width: 45,
child: TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(15)
)
),
onChanged: (value){
if(value.length == 1){
FocusScope.of(context).nextFocus();
}
},
keyboardType: TextInputType.number,
textAlign: TextAlign.center,
inputFormatters: [
LengthLimitingTextInputFormatter(1),
FilteringTextInputFormatter.digitsOnly
],
),
),
SizedBox(
height: 45,
width: 45,
child: TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(15)
)
),
onChanged: (value){
if(value.length == 1){
FocusScope.of(context).nextFocus();
}
},
style: Theme.of(context).textTheme.headline6,
keyboardType: TextInputType.number,
textAlign: TextAlign.center,
inputFormatters: [
LengthLimitingTextInputFormatter(1),
FilteringTextInputFormatter.digitsOnly
],
),
), SizedBox(
height: 45,
width: 45,
child: TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(15)
)
),
onChanged: (value){
if(value.length == 1){
FocusScope.of(context).nextFocus();
}
},
style: Theme.of(context).textTheme.headline6,
keyboardType: TextInputType.number,
textAlign: TextAlign.center,
inputFormatters: [
LengthLimitingTextInputFormatter(1),
FilteringTextInputFormatter.digitsOnly
],
),
), SizedBox(
height: 45,
width: 45,
child: TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(15)
)
),
onChanged: (value){
if(value.length == 1){
FocusScope.of(context).nextFocus();
}
},
style: Theme.of(context).textTheme.headline6,
keyboardType: TextInputType.number,
textAlign: TextAlign.center,
inputFormatters: [
LengthLimitingTextInputFormatter(1),
FilteringTextInputFormatter.digitsOnly
],
),
),
],
),
),
),
);
}
}
You can try this way.....
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey[400]),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey[600]),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red[600]),
),
focusedErrorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red[800]),
),
contentPadding: EdgeInsets.all(12.0),
fillColor: Colors.white,
),
style: TextStyle(
color: Colors.grey[800],
fontSize: 16.0,
),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey[300],
blurRadius: 10.0,
spreadRadius: 5.0,
offset: Offset(5.0, 5.0),
),
],
),
),

How to change height of country_picker?

I am using country_picker for drop-down-menu.
And I need to reduce height of this menu. How can I do this?
And how to get border to showCountryPicker?
This is what I want
And this what I get
I tried to add bottomSheetHeight, but it hides my bottom buttons.
And without bottomSheetHeigh the drop-down-menu is in full screen mode
This is my code:
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 12, right: 12),
child: TextFormField(
controller: _country,
readOnly: true,
onTap: () {
showCountryPicker(
context: context,
showWorldWide: false,
showPhoneCode: false,
showSearch: false,
countryListTheme: CountryListThemeData(
backgroundColor: AppColors.backgroundColor,
borderRadius: BorderRadius.circular(8),
bottomSheetHeight: 380,
flagSize: 0,
textStyle: TextStyle(
color: AppColors.grayA0A0A0,
fontSize: 18,
height: 2.0
)
),
onSelect: (Country country) {
log(country.toString());
}
);
},
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
borderSide: const BorderSide(width: 0)),
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(width: 1, color: AppColors.darkGray),
borderRadius: BorderRadius.circular(10)),
hintText: "Choose a country",
hintStyle: const TextStyle(
color: AppColors.grayA0A0A0, fontWeight: FontWeight.w500),
filled: true,
fillColor: AppColors.lightDark,
contentPadding:
const EdgeInsets.only(left: 8, bottom: 20, top: 20),
prefixIcon: InkWell(
child: SvgPicture.asset(
"assets/icons/Country.svg",
color: AppColors.grayA0A0A0,
height: 14,
width: 18,
fit: BoxFit.scaleDown,
),
),
suffixIcon: InkWell(
child: SvgPicture.asset(
"assets/icons/arrow_down.svg",
color: AppColors.grayA0A0A0,
height: 14,
width: 18,
fit: BoxFit.scaleDown,
),
)
),
),
),
),
Row(
children: <Widget>[
Expanded(
flex: 1,
//SizedBox(height: 20.0),
child: CountryPicker(
dense: true,
showFlag: false, //displays flag, true by default
showDialingCode:
true, //displays dialing code, false by default
showName: true, //displays country name, true by default
showCurrency: false, //eg. 'British pound'
showCurrencyISO: false,
onChanged: (Country country) {
setState(() => _selected = country);
print(country.dialingCode);
countryCode = country.dialingCode;
},
selectedCountry: _selected,
),
),
Expanded(
flex: 3,
//SizedBox(height: 20.0),
child: TextFormField(
decoration: InputDecoration(
labelText: 'Mobile no.',
border: OutlineInputBorder(),
),
validator: (val) => val.length != 10
? 'Enter a mobile number of 10 digits'
: null,
onChanged: (val) {
setState(() => phone = val);
phoneno = phone;
},
),
),
],
),

How can I save appointment information in real-time database using flutter and attach the uid? [duplicate]

I am working on saving car details of the user on real-time firebase but having difficulties. Any assistance is highly appreciated. Below is the sample of the code that I am working on. It has two dropdown buttons that are depended on each other and store vital information on the car model and make of the user.
return Scaffold(
appBar: AppBar(
title: const Text('Car Type'),
centerTitle: true,
),
body: SingleChildScrollView(
key: _formKeyValue,
// autovalidateMode: AutovalidateMode.always,
child: Column(
children: <Widget>[
const SizedBox(
height: 10,
),
DropdownButton<String?>(
value: selectedCarModel,
items: dataset.keys.map((e) {
return DropdownMenuItem<String?>(
value: e,
child: Text(e),
);
}).toList(),
onChanged: onCarModelChanged,
hint: const Text('car model'),
),
const SizedBox(
height: 10,
),
DropdownButton<String?>(
value: selectedCarMake,
hint: const Text('car make'),
items: (dataset[selectedCarModel] ?? []).map((e) {
return DropdownMenuItem<String?>(
value: e,
child: Text(e),
);
}).toList(),
onChanged: (val) {
setState(() {
selectedCarMake = val!;
});
}),
const SizedBox(
height: 10,
),
// year textfield
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
controller: _yearController,
enableSuggestions: false,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'Year',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(color: Colors.orange),
),
),
),
),
//space in between the two fields
const SizedBox(
height: 10,
),
//applied model textfield
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
controller: _appModelController,
enableSuggestions: false,
keyboardType: TextInputType.name,
decoration: InputDecoration(
hintText: 'Applied Model',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(color: Colors.deepOrange),
),
),
),
),
const SizedBox(
height: 10,
),
//numberplate textfield
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
controller: _numberPlateController,
enableSuggestions: false,
decoration: InputDecoration(
hintText: 'Number Plate',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(color: Colors.deepOrange),
),
),
),
),
const SizedBox(
height: 10,
),
//add car textbutton
ElevatedButton(
onPressed: () {
if (_yearController.text.isNotEmpty &&
_appModelController.text.isNotEmpty &&
_numberPlateController.text.isNotEmpty) {
insertData(
_yearController.text,
_appModelController.text,
_numberPlateController.text,
);
}
},
child: const Text('ADD CAR'),
),

Flutter Phone Number TextField With Country Code

I'm trying to make the phone number field in the design. I'm using the intl_phone_number_input package for this but I couldn't do it like in my design.
I would be glad if you can help with this.
My design:
My Output:
My code:
InternationalPhoneNumberInput(
hintText: 'Telefon Numarası',
onInputChanged: (PhoneNumber number) {
print(number.phoneNumber);
},
onInputValidated: (bool value) {
print(value);
},
ignoreBlank: false,
autoValidateMode: AutovalidateMode.disabled,
selectorTextStyle: TextStyle(
color: Colors.black,
backgroundColor: Colors.grey,
),
selectorConfig: const SelectorConfig(
selectorType: PhoneInputSelectorType.DROPDOWN,
setSelectorButtonAsPrefixIcon: true,
leadingPadding: 0,
showFlags: false,
trailingSpace: false),
initialValue: PhoneNumber(isoCode: 'TR'),
textFieldController: TextEditingController(),
formatInput: false,
keyboardType: TextInputType.numberWithOptions(
signed: true, decimal: true),
inputBorder: UnderlineInputBorder(),
inputDecoration: InputDecoration(
floatingLabelAlignment: FloatingLabelAlignment.start,
labelText: 'Telefon Numarası',
),
textStyle: AppTextStyle().getSfProDisplayMedium(Colors.black),
onSaved: (PhoneNumber number) {
print('On Saved: $number');
},
),
I think we can use a combination of two types widget, I try use Stack
And this is my UI:
My code:
Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Telefon Numarası',
style: TextStyle(color: Colors.grey),
),
Container(
decoration: const BoxDecoration(
border: Border(bottom: BorderSide(width: 1, color: Colors.grey))
),
child: Stack(
children: [
Positioned(
bottom: 10,
top: 10,
left: 0,
child: Container(
height: 30,
width: 80,
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.circular(5),
),
child: Row(
children: const [
Spacer(),
Icon(CupertinoIcons.chevron_down, size: 16,),
SizedBox(width: 5,),
],
),
),
),
SizedBox(
height: 50,
child: InternationalPhoneNumberInput(
hintText: 'Telefon Numarası',
onInputChanged: (PhoneNumber number) {
print(number.phoneNumber);
},
onInputValidated: (bool value) {
print(value);
},
ignoreBlank: false,
autoValidateMode: AutovalidateMode.disabled,
selectorTextStyle: const TextStyle(
color: Colors.black,
),
selectorConfig: const SelectorConfig(
selectorType: PhoneInputSelectorType.BOTTOM_SHEET,
setSelectorButtonAsPrefixIcon: false,
leadingPadding: 10,
showFlags: false,
trailingSpace: true,
),
initialValue: PhoneNumber(isoCode: 'TR'),
textFieldController: TextEditingController(),
formatInput: false,
keyboardType: TextInputType.numberWithOptions(
signed: true, decimal: true),
inputDecoration: const InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent)
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent)
),
floatingLabelAlignment: FloatingLabelAlignment.start,
// labelText: 'Telefon Numarası',
),
textStyle: const TextStyle(color: Colors.black),
onSaved: (PhoneNumber number) {
print('On Saved: $number');
},
),
),
],
),
),
],
),
),

flutter UI problem: text feild not scrolling behind stepper

Here when I am scrolling then my text fields which is in grey[200], scroll overe stepper little bit, as you can see in image. so How to fix it?
Here when I am scrolling then my text fields which is in grey[200], scroll overe stepper little bit, as you can see in image. so How to fix it?
This is my stepper code
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import '../../../constants/constants.dart';
class BecomeHH extends StatefulWidget {
const BecomeHH({Key? key}) : super(key: key);
#override
_BecomeHHState createState() => _BecomeHHState();
}
class _BecomeHHState extends State<BecomeHH> {
int _activeStepIndex = 0;
TextEditingController nameController = TextEditingController();
TextEditingController cityController = TextEditingController();
TextEditingController countryController = TextEditingController();
TextEditingController emailController = TextEditingController();
TextEditingController phoneController = TextEditingController();
List<Step> stepList() => [
Step(
isActive: _activeStepIndex >= 0,
state:
_activeStepIndex >= 0 ? StepState.complete : StepState.disabled,
title: const Text('Step One'),
content: ClipRRect(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"Name",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.grey,
),
),
),
SizedBox(
height: 3.7,
),
Container(
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(8)),
child: TextFormField(
controller: nameController,
textAlign: TextAlign.left,
keyboardType: TextInputType.text,
decoration: const InputDecoration(
fillColor: Colors.white,
hintText: 'Enter Your Name',
hintStyle: TextStyle(fontSize: 16),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
borderSide: BorderSide.none,
),
filled: false,
contentPadding: EdgeInsets.only(
left: 16,
),
),
),
),
SizedBox(
height: 16,
),
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"City",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.grey,
),
),
),
SizedBox(
height: 3.7,
),
Container(
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(8)),
child: TextFormField(
controller: cityController,
textAlign: TextAlign.left,
keyboardType: TextInputType.text,
decoration: const InputDecoration(
fillColor: Colors.white,
hintText: 'Enter Your City',
hintStyle: TextStyle(fontSize: 16),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
borderSide: BorderSide.none,
),
filled: false,
contentPadding: EdgeInsets.only(
left: 16,
),
),
),
),
SizedBox(
height: 16,
),
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"Country",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.grey,
),
),
),
SizedBox(
height: 3.7,
),
Container(
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(8)),
child: TextFormField(
controller: countryController,
textAlign: TextAlign.left,
keyboardType: TextInputType.text,
decoration: const InputDecoration(
fillColor: Colors.white,
hintText: 'Enter Your Country',
hintStyle: TextStyle(fontSize: 16),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
borderSide: BorderSide.none,
),
filled: false,
contentPadding: EdgeInsets.only(
left: 16,
),
),
),
),
SizedBox(
height: 16,
),
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"Email",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.grey,
),
),
),
SizedBox(
height: 3.7,
),
Container(
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(8)),
child: TextFormField(
controller: emailController,
textAlign: TextAlign.left,
keyboardType: TextInputType.emailAddress,
decoration: const InputDecoration(
fillColor: Colors.white,
hintText: 'Enter Your Email',
hintStyle: TextStyle(fontSize: 16),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
borderSide: BorderSide.none,
),
filled: false,
contentPadding: EdgeInsets.only(
left: 16,
),
),
),
),
SizedBox(
height: 16,
),
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"Phone",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.grey,
),
),
),
SizedBox(
height: 3.7,
),
Container(
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(8)),
child: TextFormField(
controller: phoneController,
textAlign: TextAlign.left,
keyboardType: TextInputType.number,
decoration: const InputDecoration(
fillColor: Colors.white,
hintText: 'Enter Your Phone Number',
hintStyle: TextStyle(fontSize: 16),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
borderSide: BorderSide.none,
),
filled: false,
contentPadding: EdgeInsets.only(
left: 16,
),
),
),
),
SizedBox(
height: 16,
),
],
),
),
),
Step(
isActive: _activeStepIndex >= 0,
state:
_activeStepIndex >= 1 ? StepState.complete : StepState.disabled,
title: const Text('Step Two'),
content: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"Video",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.grey,
),
),
),
],
),
)),
Step(
isActive: _activeStepIndex >= 0,
state:
_activeStepIndex >= 2 ? StepState.complete : StepState.disabled,
title: const Text('Step Three'),
content: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"Focus Area",
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.grey,
),
),
),
],
)))
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(elevation: 0,
backgroundColor: Colors.white38,
leading: IconButton(
icon: Icon(
Icons.arrow_back_ios,
color: Colors.black,
),
onPressed: () {
Navigator.pop(context);
},
),
),
body: SafeArea(
child: Theme(
data: ThemeData(
colorScheme: Theme.of(context).colorScheme.copyWith(primary: selectBlueColor),
),
child: Stepper(
type: StepperType.horizontal,
currentStep: _activeStepIndex,
steps: stepList(),
onStepContinue: () {
if (_activeStepIndex < (stepList().length - 1)) {
setState(() {
_activeStepIndex += 1;
});
} else {
print('Submited');
}
},
onStepCancel: () {
if (_activeStepIndex == 0) {
return;
}
setState(() {
_activeStepIndex -= 1;
});
},
onStepTapped: (int index) {
setState(() {
_activeStepIndex = index;
});
},
controlsBuilder: (BuildContext context, ControlsDetails details) {
final isLastStep = _activeStepIndex == stepList().length - 1;
return Container(
child: Row(
children: [
Expanded(
child: ElevatedButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(const Color(0xFF158998)),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.teal, width: 0.0),
),
),
),
onPressed: details.onStepContinue,
child: Padding(
padding: const EdgeInsets.all(15.0),
child: (isLastStep)
? const Text('Submit')
: const Text('Next'),
),
),
),
const SizedBox(
width: 10,
),
if (_activeStepIndex > 0)
Expanded(
child: ElevatedButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(const Color(0xFF158998)),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.teal, width: 0.0),
),
),
),
onPressed: details.onStepCancel,
child: Padding(
padding: const EdgeInsets.all(15.0),
child: const Text('Back'),
),
),
),
],
),
);
},
),
),
),
);
}
}
Simply add this line in your Stepper widget.
physics: ScrollPhysics(),