How to focus on spesific section on keyboar pops up in flutter - flutter

Question

I'm bit more thinking a bout UX in this app and wandering how I can achieve below behavior in flutter. so far what I have done is just making sections using Rows, Columns and Expanded widgets. but when the keyboard opens it overlaps content. I have my custom widgets so its simplified as below.
return Scaffold(
body: SafeArea(
child: Column(
children: [
Expanded(
flex: 6,
child: Container(
// Image goes here
),
Expanded(
flex: 5,
child: Container(
child: Column(
children: [
Container(
margin: EdgeInsets.only(left: 20, right: 20),
padding: EdgeInsets.only(left: 20, right: 20, top: 5),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10)),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.1),
spreadRadius: 5,
blurRadius: 8,
offset:
Offset(0, 4), // changes position of shadow
),
],
),
child: Column(
children: [
// Form goes here
],
),
),
Button(
label: "Sign In",
)
],
),
),
),
Expanded(
flex: 2,
child: Button(
label: "Don’t have an account? Sign Up",
type: 'text',
align: 'center'),
),
],
),
));

Answer 1

I did something similar, with FocusScope.of(context).hasFocus to detect if keyboard is showing or not and change my UI accordingly.

Answer 2

Found the solution. Just needs to add reverse: true to SingleChildScrollView then it scroll down the SingleChildScrollView to bottom when focus on TextField
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFFF9FDFF),
body: SafeArea(
child: SingleChildScrollView(
reverse: true, // <---- Add this
child: Column(
child: // Your content
),
),
),
);