instagram-flutter-clone icon indicating copy to clipboard operation
instagram-flutter-clone copied to clipboard

signup bio text field fix

Open smil-thakur opened this issue 3 years ago • 2 comments

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<SignUpScreen> { 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, ), ), ), ), ) ], ) ], ), ), ), ), )); } }

smil-thakur avatar Jan 24 '22 06:01 smil-thakur

also comment out flexbile widget @RivaanRanawat

smil-thakur avatar Jan 24 '22 06:01 smil-thakur

Yeah, That fixes the overflow issue

Cavin6080 avatar Apr 15 '22 04:04 Cavin6080

Will take a look at this. Thanks!

RivaanRanawat avatar Nov 24 '22 09:11 RivaanRanawat