FOR ANDROID
When we focus on Bio text field inside signUp page the textflied does not go up that is we can not see what we are typing
if we wrap the container inside the safearea in singleChildScrollView() the issue will be fixed
plus we can add physics of bouncingscrollphysics so that it looks clean
here my is code for just UI
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:instagram/utils/color.dart';
import 'package:instagram/widgets/text_fill_input.dart';
class SignUpScreen extends StatefulWidget {
const SignUpScreen({Key? key}) : super(key: key);
@OverRide
_SignUpScreenState createState() => _SignUpScreenState();
}
class _SignUpScreenState extends State {
final TextEditingController _emailController = TextEditingController();
final TextEditingController _passwordController = TextEditingController();
final TextEditingController _bioController = TextEditingController();
final TextEditingController _usernameController = TextEditingController();
@OverRide
void dispose() {
// TODO: implement dispose
super.dispose();
_emailController.dispose();
_passwordController.dispose();
_bioController.dispose();
_usernameController.dispose();
}
@OverRide
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
physics: const BouncingScrollPhysics(),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 32),
child: Container(
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// Flexible(
// child: Container(),
// flex: 2,
// ),
//svg image
SvgPicture.asset(
'assets/ic_instagram.svg',
color: primaryColor,
height: 64,
),
const SizedBox(
height: 64,
),
//circle avaatar
InkWell(
onTap: () {},
borderRadius: BorderRadius.circular(100),
child: const Padding(
padding: EdgeInsets.all(8.0),
child: CircleAvatar(
radius: 64,
backgroundImage: NetworkImage(
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSyRQMnGzDaaUvx0wbRLJnc_JzEz_VCs44CBY-UOvh0kaacPJEAgPnXWQCYf2WroEwfl7w&usqp=CAU'),
),
),
),
const SizedBox(
height: 24,
),
//text field for username
TextFieldInput(
textEditingController: _usernameController,
hintText: 'Enter Your Username',
textInputType: TextInputType.text),
const SizedBox(
height: 24,
),
//text field for email
TextFieldInput(
textEditingController: _emailController,
hintText: 'Enter Your Email',
textInputType: TextInputType.emailAddress),
const SizedBox(
height: 24,
),
//text fiel for password
TextFieldInput(
textEditingController: _passwordController,
hintText: 'Enter Your Password',
textInputType: TextInputType.text,
isPass: true,
),
const SizedBox(
height: 24,
),
//text field for bio
TextFieldInput(
textEditingController: _bioController,
hintText: 'Enter Your Bio',
textInputType: TextInputType.text),
const SizedBox(
height: 24,
),
//button login
InkWell(
onTap: () {},
child: Container(
child: const Text("Sign up"),
width: double.infinity,
alignment: Alignment.center,
padding: const EdgeInsets.symmetric(vertical: 12),
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4),
),
color: blueColor,
),
),
),
const SizedBox(
height: 12,
),
// Flexible(
// child: Container(),
// flex: 2,
// ),
//transition to signing up
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Container(
child: const Text("Don't have an account?"),
),
),
GestureDetector(
onTap: () {},
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Container(
child: const Text(
" Sign up.",
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
),
)
],
)
],
),
),
),
),
));
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent