Sliding Text Form Fields in Flutter - flutter

Question

I want to make text fields like this which transition horizontally exactly like this when I click next. How can I achieve it?
Link of the 4 sec video:
https://firebasestorage.googleapis.com/v0/b/my-chat-app-524e3.appspot.com/o/WhatsApp%20Video%202022-01-14%20at%207.42.17%20AM.mp4?alt=media&token=6eeddcf9-b145-437f-b049-121acd1209b1

Answer 1

well we can make simply animated that with transfrom, or just use pageview class
check this out :
import 'package:flutter/material.dart';
class SlidingTextField extends StatefulWidget {
const SlidingTextField({Key? key}) : super(key: key);
#override
_SlidingTextFieldState createState() => _SlidingTextFieldState();
}
class _SlidingTextFieldState extends State<SlidingTextField> {
late PageController _pageController;
late List<TextEditingController> _tecList;
#override
void initState() {
super.initState();
_pageController = PageController();
_tecList = List.generate(3, (index){
return TextEditingController();
});
}
#override
void dispose() {
for (var tec in _tecList) {
tec.dispose();
}
super.dispose();
}
#override
Widget build(BuildContext context) {
return Material(
child: Column(
children: [
Expanded(
child: Container(
color: Colors.cyan,
),
),
Padding(
padding: const EdgeInsets.all(25.0),
child: Container(
height: 120,
child: PageView.builder(
controller: _pageController,
itemCount: 3,
itemBuilder: (context, index) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: Text(
"Details ${index+1}",
style: const TextStyle(color: Colors.grey),
),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: TextField(
decoration: InputDecoration(
enabledBorder: _oInputBorder(),
focusedBorder: _oInputBorder()),
textInputAction: TextInputAction.done,
controller: _tecList[index],
onSubmitted: (text) {
int nextPage = index + 1;
if (nextPage < 3) {
_pageController.animateToPage(nextPage,
duration: const Duration(milliseconds: 500),
curve: Curves.ease);
}
},
),
)
],
);
},
),
),
),
Expanded(
child: Container(
color: Colors.yellow,
),
)
],
),
);
}
InputBorder _oInputBorder() {
return OutlineInputBorder(
borderRadius: BorderRadius.circular(15.0),
borderSide: BorderSide(width: 1, color: Colors.grey.withOpacity(0.5)));
}
}
result :