Created
August 11, 2021 14:50
-
-
Save comatory/e02ff4749e61a46a167832fbb123e0cd to your computer and use it in GitHub Desktop.
Fix text field bottom overflow and detect opened keyboard
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart'; | |
import 'dart:math'; | |
import 'dart:async'; | |
void main() { | |
runApp(MyApp()); | |
} | |
class MyApp extends StatelessWidget { | |
// This widget is the root of your application. | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
title: 'Flutter Demo', | |
theme: ThemeData( | |
primarySwatch: Colors.blue, | |
), | |
home: MyHomePage(), | |
); | |
} | |
} | |
class MyHomePage extends StatefulWidget { | |
MyHomePage({Key? key}) : super(key: key); | |
@override | |
_MyHomePageState createState() => _MyHomePageState(); | |
} | |
class _MyHomePageState extends State<MyHomePage> { | |
bool _hasError = false; | |
bool _usernameHasError = false; | |
bool _passwordHasError = false; | |
bool _keyboardVisible = false; | |
final KeyboardVisibilityController _keyboardVisibilityController = | |
KeyboardVisibilityController(); | |
StreamSubscription<bool>? _keyboardVisibilitySubscription; | |
@override | |
void initState() { | |
super.initState(); | |
_keyboardVisibilitySubscription = _keyboardVisibilityController.onChange | |
.listen(_handleKeyboardVisibilityChange); | |
} | |
@override | |
void dispose() { | |
_keyboardVisibilitySubscription?.pause(); | |
_keyboardVisibilitySubscription?.cancel(); | |
super.dispose(); | |
} | |
void _handleKeyboardVisibilityChange(bool visible) { | |
setState(() { | |
_keyboardVisible = visible; | |
}); | |
} | |
_handleFormSubmission() { | |
final rand = Random(); | |
setState(() { | |
_hasError = rand.nextBool(); | |
}); | |
print('Sumbmitted'); | |
} | |
_handleUsernameChange(String value) { | |
setState(() { | |
_usernameHasError = value.isEmpty; | |
}); | |
} | |
_handlePasswordChange(String value) { | |
setState(() { | |
_passwordHasError = value.isEmpty; | |
}); | |
} | |
@override | |
Widget build(BuildContext context) { | |
print('\nkeyboard is visible $_keyboardVisible'); | |
return Scaffold( | |
body: Container( | |
padding: const EdgeInsets.all(10.0).add(const EdgeInsets.only(top: 30.0)), | |
child: Column( | |
mainAxisSize: MainAxisSize.max, | |
mainAxisAlignment: MainAxisAlignment.spaceBetween, | |
children: [ | |
Container( | |
child: Column(children: [ | |
Text('Large title', | |
style: Theme.of(context).textTheme.headline2), | |
_keyboardVisible ? Container() : Text( | |
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, ' | |
'sed do eiusmod tempor incididunt ut labore et dolore magna' | |
' aliqua. Ut enim ad minim veniam, quis nostrud exercitation ' | |
'ullamco laboris nisi ut aliquip ex ea commodo consequat.', | |
style: Theme.of(context).textTheme.headline5), | |
]), | |
), | |
Container( | |
padding: const EdgeInsets.only(top: 10.0), | |
child: Column(children: [ | |
Container( | |
alignment: Alignment.centerLeft, | |
padding: const EdgeInsets.only(bottom: 20.0), | |
child: Text('Additional information is placed here')), | |
TextFormField( | |
decoration: InputDecoration( | |
labelText: 'Username', | |
errorText: _usernameHasError ? 'Invalid username' : null), | |
onChanged: _handleUsernameChange, | |
), | |
TextFormField( | |
obscureText: true, | |
decoration: InputDecoration( | |
labelText: 'Password', | |
errorText: _passwordHasError ? 'Invalid password' : null), | |
onChanged: _handlePasswordChange, | |
), | |
_hasError | |
? Container( | |
padding: const EdgeInsets.symmetric(vertical: 20.0), | |
child: Row( | |
mainAxisAlignment: MainAxisAlignment.center, | |
children: [ | |
Icon(Icons.error, | |
color: Theme.of(context).errorColor), | |
Text('An error occurred!', | |
style: TextStyle( | |
color: Theme.of(context).errorColor)) | |
])) | |
: Container() | |
]), | |
), | |
Container( | |
padding: const EdgeInsets.only(top: 10.0), | |
child: Column(children: [ | |
Container( | |
width: double.infinity, | |
child: ElevatedButton( | |
child: Text('Submit'), | |
onPressed: _handleFormSubmission, | |
)), | |
])), | |
]), | |
)); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment