phone.

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

class MyPhone extends StatefulWidget {

const MyPhone({super.key});

@override
State<MyPhone> createState() => _MyPhoneState();
}

class _MyPhoneState extends State<MyPhone> {

TextEditingController countrycode= TextEditingController();
@override
void initState() {
// TODO: implement initState
countrycode.text="+91";
super.initState();
}
Widget build(BuildContext context) {

return Scaffold(
body: Container(
margin: EdgeInsets.only(left: 25,right: 25),
alignment: Alignment.center,
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
'assets/gps.png',
width: 150,
height: 150,
),
SizedBox(
height: 25,
),

Text(
'Phone Verification',
style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
),
Text ('we need to register your phone before getting started !',
style: TextStyle(fontSize: 16,
),
textAlign: TextAlign.center,
),
SizedBox(
height: 30,
),
Container(
height: 50,
decoration: BoxDecoration(
border: Border.all(width: 1,color: Colors.grey),
borderRadius: BorderRadius.circular(10)
),
child:
Row(
children:[
SizedBox(
 width: 10,
),
SizedBox(
width: 40,
child: TextField(
controller: countrycode,
decoration: InputDecoration(border: InputBorder.none),
),
),

Text('|',style: TextStyle(fontSize: 33,color: Colors.grey),

),
SizedBox(
width: 10,
),
Expanded(
child: TextField(
decoration: InputDecoration(border:
InputBorder.none,hintText: "phone"),
),
),
]
),
),
SizedBox(
height:20,
),
SizedBox(
height: 45,
width: double.infinity,
child: ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, "otp");
},
child: Text('Send the Code'),
style: ElevatedButton.styleFrom(primary: Colors.green.shade600,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10))),
)
)

],

),
),
),
);

}
}

otp.dart

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

class MyOtp extends StatefulWidget {

const MyOtp({super.key});
 @override
State<MyOtp> createState() => _MyOtpState();
}

class _MyOtpState extends State<MyOtp> {

@override
Widget build(BuildContext context) {
final defaultPinTheme = PinTheme(
width: 56,
height: 56,
textStyle: TextStyle(fontSize: 20, color: Color.fromRGBO(30, 60, 87, 1),
fontWeight: FontWeight.w600),
decoration: BoxDecoration(
border: Border.all(color: Color.fromRGBO(234, 239, 243, 1)),
borderRadius: BorderRadius.circular(20),
),
);

final focusedPinTheme = defaultPinTheme.copyDecorationWith(

border: Border.all(color: Color.fromRGBO(114, 178, 238, 1)),
borderRadius: BorderRadius.circular(8),
);

final submittedPinTheme = defaultPinTheme.copyWith(

decoration: defaultPinTheme.decoration?.copyWith(
color: Color.fromRGBO(234, 239, 243, 1),
),
);
return Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
leading: IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: Icon(
Icons.arrow_back_ios_rounded,
color: Colors.black,),
),
),
body: Container(
margin: EdgeInsets.only(left: 25,right: 25),
alignment: Alignment.center,
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
'assets/gps.png',
width: 150,
height: 150,
),
SizedBox(
height: 25,
),
 Text(
'Phone Verification',
style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
),
Text ('we need to register your phone before getting started !',
style: TextStyle(fontSize: 16,
),
textAlign: TextAlign.center,
),
SizedBox(
height: 30,
),
Pinput(
length: 6 ,
showCursor: true,
),
SizedBox(
height:20,
),
SizedBox(
height: 45,
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
child: Text('Verify phone number'),
style: ElevatedButton.styleFrom(primary: Colors.green.shade600,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10))),
),
),
Row(
children: [
TextButton(onPressed: (){
Navigator.pushNamedAndRemoveUntil
(context, 'phone', (route) => false);
},
child: Text("Edit Phone Number ?",
style: TextStyle(color: Colors.black),
))

],
)

],

),
),
),
);

}
}

main.dart

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:vehicle/otp.dart';
import 'package:vehicle/phone.dart';
import 'package:vehicle/splash_screen.dart';

void main() async {

WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(const Myapp());
}
class Myapp extends StatelessWidget {
const Myapp({super.key});

@override
Widget build(BuildContext context) {
return const MaterialApp(

debugShowCheckedModeBanner: false,
initialRoute: 'phone',
home: SplashScreen(),

//routes: {'phone': (context) => MyPhone(), 'otp': (context) => MyOtp()}

);
}
}