Develop Reference

Flutter RawKeyboardListener Text Field Focus control

I am developing an android TV application using flutter. The remote control key which user is pressing, can be detected by RawKeyboardListener. But the focus is having an issue. Initially the focus will be in username field, then once editing complete it will move to password field, and then to the button. So OnTap mehthod will be triggered. After that the focus is only going to username button for up arrow key. No response for down arrow key. Also if the data entered again, even if the button is having focus, I am not able to enter it(onTap function is not working). Any idea??
import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/foundation.dart';
import 'package:google_fonts/google_fonts.dart';
class WelcomePage extends StatefulWidget {
#override
_WelcomePageState createState() => _WelcomePageState();
}
class _WelcomePageState extends State<WelcomePage> {
TextEditingController nameController = TextEditingController();
TextEditingController passwordController = TextEditingController();
var usermame, password = '';
late FocusNode _fs = FocusNode();
FocusNode? userNameFocusNode;
FocusNode? passwordFocusNode;
FocusNode? buttonFocusNode;
#override
void initState() {
super.initState();
_fs = FocusNode();
userNameFocusNode = FocusNode();
passwordFocusNode = FocusNode();
buttonFocusNode = FocusNode();
setFirstFocus();
}
setFirstFocus() {
if (userNameFocusNode == null) {
userNameFocusNode = FocusNode();
passwordFocusNode = FocusNode();
buttonFocusNode = FocusNode();
FocusScope.of(context).requestFocus(userNameFocusNode);
}
changeFocus(BuildContext context, FocusNode node) {
FocusScope.of(context).requestFocus(node);
}
}
#override
void dispose() {
super.dispose();
_fs.dispose();
userNameFocusNode?.dispose();
passwordFocusNode?.dispose();
buttonFocusNode?.dispose();
}
Widget _title() {
return RichText(
textAlign: TextAlign.center,
text: TextSpan(
text: 'Login Page',
style: GoogleFonts.portLligatSans(
textStyle: Theme.of(context).textTheme.headline4,
fontSize: 50,
fontWeight: FontWeight.w700,
color: Colors.red,
),
);
}
Widget _usernameController() {
return Container(
width: MediaQuery.of(context).size.width / 2.5,
padding: const EdgeInsets.symmetric(vertical: 13),
alignment: Alignment.center,
child: TextFormField(
textInputAction: TextInputAction.done,
onEditingComplete: () {
userNameFocusNode!.unfocus();
FocusScope.of(context).requestFocus(passwordFocusNode);
},
textAlign: TextAlign.left,
focusNode: userNameFocusNode,
autofocus: true,
controller: nameController,
style:
const TextStyle(fontSize: 22.0, height: 1, color: Colors.white),
decoration: InputDecoration(
isDense: true,
prefixIcon: const Padding(
padding: EdgeInsets.only(left: 0),
child: Icon(
Icons.person,
size: 30,
color: Colors.white,
),
),
fillColor: Colors.white,
border: OutlineInputBorder(
borderSide: const BorderSide(color: Colors.white, width: 5.00),
borderRadius: BorderRadius.circular(20.0),
),
labelText: ' Username',
labelStyle: const TextStyle(color: Colors.white, fontSize: 20),
)));
}
Widget _passwordController() {
return Container(
width: MediaQuery.of(context).size.width / 2.5,
padding: const EdgeInsets.symmetric(vertical: 13),
alignment: Alignment.center,
child: TextFormField(
textInputAction: TextInputAction.done,
onEditingComplete: () {
passwordFocusNode!.unfocus();
FocusScope.of(context).requestFocus(buttonFocusNode);
},
focusNode: passwordFocusNode,
obscureText: true,
textAlign: TextAlign.left,
autofocus: true,
controller: passwordController,
style:
const TextStyle(fontSize: 22.0, height: 1, color: Colors.white),
decoration: InputDecoration(
isDense: true,
prefixIcon: const Padding(
padding: EdgeInsets.only(left: 0),
child: Icon(
Icons.https,
size: 25,
color: Colors.white,
),
),
fillColor: Colors.white,
border: OutlineInputBorder(
borderSide: const BorderSide(color: Colors.white, width: 5.00),
borderRadius: BorderRadius.circular(20.0),
),
labelText: ' Password',
labelStyle: const TextStyle(color: Colors.white, fontSize: 20),
)));
}
Widget _submitButton() {
return InkWell(
focusNode: buttonFocusNode,
onTap: () {
print('${nameController.text} + ${passwordController.text}');
},
child: Container(
width: MediaQuery.of(context).size.width / 2.5,
padding: const EdgeInsets.symmetric(vertical: 5),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(10)),
boxShadow: <BoxShadow>[
BoxShadow(
color: const Color(0xffdf8e33).withAlpha(100),
offset: const Offset(2, 4),
blurRadius: 8,
spreadRadius: 2)
],
color: Colors.white),
child: const Text(
'Login',
style: TextStyle(fontSize: 20, color: Colors.red),
),
),
);
}
void snackBardata(context, String actionMsg, var duration, Color snColour,
Color snDataColor) {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text(
actionMsg,
style: TextStyle(
color: snDataColor,
fontSize: 20,
),
textAlign: TextAlign.center,
),
duration: Duration(seconds: 2),
backgroundColor: snColour,
behavior: SnackBarBehavior.floating,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
));
}
void _handleKeyPressed(context, event) {
if (event is RawKeyDownEvent) {
switch (event.data.logicalKey.keyLabel.toString()) {
case 'Select':
{
_fs.unfocus();
print('select key pressed');
FocusScope.of(context).requestFocus(buttonFocusNode);
}
break;
case 'Arrow Down':
{
print('arrow down');
FocusScope.of(context).requestFocus(userNameFocusNode);
}
break;
case 'Arrow Left':
{}
break;
case 'Arrow Up':
{
print('arrow up');
FocusScope.of(context).requestFocus(passwordFocusNode);
}
break;
case 'Arrow Right':
{}
break;
default:
{
print('unknown--------------------------------');
}
break;
}
}
}
#override
Widget build(BuildContext context) {
return Shortcuts(
shortcuts: {
LogicalKeySet(LogicalKeyboardKey.select): const ActivateIntent(),
},
child: Scaffold(
body: SingleChildScrollView(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 20),
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
image: DecorationImage(
image: const AssetImage('assets/asset1.jpg'),
fit: BoxFit.fill,
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.6), BlendMode.hardLight),
),
borderRadius: const BorderRadius.all(Radius.circular(0)),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey.shade200,
offset: const Offset(2, 4),
blurRadius: 5,
spreadRadius: 2)
],
gradient: const LinearGradient(
begin: Alignment.topCenter, end: Alignment.bottomCenter,
// colors: [Colors.yellow, Colors.teal])),
colors: [Color(0xfffbb448), Color(0xffe46b10)])),
child: RawKeyboardListener(
focusNode: _fs,
onKey: (event) {
_handleKeyPressed(context, event);
},
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_title(),
const SizedBox(
height: 20,
),
_usernameController(),
_passwordController(),
const SizedBox(
height: 20,
),
_submitButton(),
const SizedBox(
height: 20,
),
],
),
),
),
),
));
}
}

Flutter Keyboard that Appear and Disappear

I have a problem with My Flutter Project...
The Keyboar always Appear and Suddenly Disappear when I try to click the TextField..
But It's only happen in this Page...
here is the Code
import 'dart:io';
import 'package:chat_chat_8/service/auth.dart';
import 'package:chat_chat_8/theme/style.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
import 'package:image_picker/image_picker.dart';
class ProfilePage extends StatefulWidget {
const ProfilePage({Key? key}) : super(key: key);
#override
State<ProfilePage> createState() => _ProfilePageState();
}
class _ProfilePageState extends State<ProfilePage> {
TextEditingController txt_name = new TextEditingController();
TextEditingController txt_status = new TextEditingController();
final FirebaseAuth _auth = FirebaseAuth.instance;
ImagePicker picker = ImagePicker();
var stateCondition;
var profileImage;
File? uriImage;
#override
Widget build(BuildContext context) {
Widget PhotoProfile(String userImage) {
if (profileImage == null) {
profileImage = userImage;
}
return Container(
height: 197.53,
width: 197.53,
decoration: BoxDecoration(
image: DecorationImage(
image: profileImage == userImage
? NetworkImage(profileImage.toString())
: FileImage(uriImage as File) as ImageProvider,
fit: BoxFit.cover,
),
borderRadius: BorderRadius.circular(150),
border: Border.all(
width: 2,
color: Purple_sub,
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
height: 42.18,
width: 42.18,
child: ElevatedButton(
onPressed: () async {
XFile? image =
await picker.pickImage(source: ImageSource.gallery);
if (image != null) {
setState(() {
profileImage = File(image.path).toString();
uriImage = File(image.path);
});
}
},
style: ElevatedButton.styleFrom(
primary: Purple_sub,
shadowColor: Colors.black54,
padding: EdgeInsets.all(0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50),
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(
Icons.mode_edit_outline_outlined,
color: Colors.white,
size: 25,
),
],
)),
)
],
));
}
Widget ConditionComboBox(var userCondition) {
if (stateCondition == null) {
stateCondition = userCondition;
}
return Container(
height: 55,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: Text_Field,
),
),
child: Padding(
padding: const EdgeInsets.all(13),
child: DropdownButtonHideUnderline(
child: DropdownButton<String>(
focusColor: Colors.white,
value: stateCondition,
//elevation: 5,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Color(0xff595555),
fontSize: 24,
),
//iconEnabledColor: Colors.black,
items: <String>[
'Available',
'Unavailable',
'Busy',
].map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(
value,
style: TextStyle(
color: Color(0xff595555),
),
),
);
}).toList(),
hint: Text(
"Select your condition",
style: TextStyle(
color: Color(0xff595555),
fontSize: 14,
fontWeight: FontWeight.w500),
),
onChanged: (value) {
setState(() {
stateCondition = value;
});
},
),
),
),
);
}
Widget TextProfile(String userName, String userStatus) {
txt_name.text = userName;
txt_status.text = userStatus;
return Column(
children: <Widget>[
Container(
height: 56.67,
child: TextFormField(
controller: txt_name,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Color(0xff595555),
fontSize: 24,
),
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(color: Text_Field),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(
color: Purple_sub,
),
),
),
),
),
SizedBox(
height: 18.19,
),
Container(
height: 56.67,
child: TextFormField(
controller: txt_status,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Color(0xff595555),
fontSize: 24,
),
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(color: Text_Field),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(
color: Purple_sub,
),
),
),
),
),
],
);
}
Widget SaveButton() {
return Container(
height: 50,
width: MediaQuery.of(context).size.width,
child: ElevatedButton(
onPressed: () {
AuthMethod().updateUser(
_auth.currentUser!.uid,
txt_name.text,
uriImage != null ? uriImage as File : null,
txt_status.text,
stateCondition,
);
},
style: ElevatedButton.styleFrom(
primary: Purple_sub,
),
child: Text(
'Complete',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.w700,
),
),
),
);
}
return Scaffold(
body: SingleChildScrollView(
child: Padding(
padding: MediaQuery.of(context).viewInsets,
child: Container(
padding: EdgeInsets.only(top: 51.32),
margin: EdgeInsets.symmetric(
horizontal: 22.55,
),
child: StreamBuilder(
stream: FirebaseFirestore.instance
.collection("Users")
.doc(_auth.currentUser!.uid)
.snapshots(),
builder: (context, AsyncSnapshot snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Container();
}
return Container(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
'assets/images/logo_app.png',
height: 50,
width: 50.64,
),
SizedBox(
width: 11.25,
),
Text(
'Profile',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 27,
),
)
],
),
SizedBox(
height: 44,
),
PhotoProfile(
snapshot.data.data()["userImage"],
),
SizedBox(
height: 54.83,
),
TextProfile(
snapshot.data.data()["userName"],
snapshot.data.data()["userStatus"],
),
SizedBox(
height: 18.19,
),
ConditionComboBox(
snapshot.data.data()["userCondition"],
),
SizedBox(
height: 100.98,
),
SaveButton(),
SizedBox(
height: 65.79,
),
],
),
);
},
),
),
),
),
);
}
}
I've tries many ways to solve this matter such as like in google
but no works at all
And my senior also can not solve this problem
I hope Some body can help me to Solve this Problem
Thx

I think you have to get all of the widgets (except the scaffold) out of the build method.

SingleChildScrollView won't work? How to adjust layout when soft keyboard appears in flutter?

I'm a beginner in a flutter. The keyboard appears but the layout doesn't resize to keep it in view. I also checked with SingleChildScrollView but won't work. How to adjust layout when soft keyboard appears in flutter?
Here is my class :
return new Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: MyColors.gray_dark,
appBar:
PreferredSize(child: Container(), preferredSize: Size.fromHeight(0)),
body: Stack(
children: <Widget>[
Container(
child: Image.asset(
'assets/images/air_force_golden_jubilee_campus.jpeg',
fit: BoxFit.cover),
width: double.infinity,
height: double.infinity,
),
Container(color: MyColors.primaryDark.withOpacity(0.9)),
SingleChildScrollView(
child: Container(
padding: EdgeInsets.symmetric(vertical: 30, horizontal: 30),
width: double.infinity,
height: double.infinity,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(height: 30),
Text("Welcome!",
style: MyText.display2(context).copyWith(
color: Colors.white, fontFamily: MyFonts.openSansBold)),
Container(height: 5),
Text(schoolDetails.schoolName,
style: MyText.title(context).copyWith(
color: Colors.white,
fontWeight: FontWeight.w300,
fontFamily: MyFonts.openSansRegular)),
Container(height: 10),
Container(
width: 120,
height: 120,
child: Image.asset(
'assets/images/schools/air_force_bal_bharati_logo.png'),
),
Container(height: 10),
Container(height: 3, width: 40, color: Colors.white),
Container(height: 5),
Text("Log in",
style: MyText.medium(context).copyWith(
color: Colors.white,
fontWeight: FontWeight.bold,
fontFamily: MyFonts.openSansBold)),
SizedBox(),
TextField(
controller: nameController,
style: TextStyle(color: Colors.white),
keyboardType: TextInputType.number,
decoration: InputDecoration(
labelText: "USERNAME",
labelStyle: TextStyle(
color: Colors.white,
fontFamily: MyFonts.openSansRegular),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 1),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 2),
),
),
),
Container(height: 25),
TextField(
style: TextStyle(color: Colors.white),
controller: passwordController,
keyboardType: TextInputType.text,
obscureText: _obscureText,
decoration: InputDecoration(
labelText: "PASSWORD",
labelStyle: TextStyle(
color: Colors.white,
fontFamily: MyFonts.openSansRegular),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 1),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 2),
),
suffixIcon: GestureDetector(
onTap: () {
setState(() {
_obscureText = !_obscureText;
});
},
child: Icon(
_obscureText
? Icons.visibility
: Icons.visibility_off,
color: Colors.white),
)),
),
Container(height: 20),
FloatingActionButton(
heroTag: "fab",
elevation: 0,
backgroundColor: Colors.white,
child: Icon(Icons.chevron_right, color: Colors.cyan[800]),
onPressed: () {
/* Navigator.push(context, MaterialPageRoute(builder: (BuildContext context){
return DashboardRoute(schoolDetails);
//return NoticeType();
}));*/
// LoginData data = new LoginData.section("sahood#traxsmart.in", "abc#123ABC");
progressDialog.show();
LoginData data = new LoginData.section(
nameController.text, passwordController.text);
_signIn(data);
},
),
SizedBox(),
Container(
width: double.infinity,
child: FlatButton(
child: Text("forgot password?",
style: TextStyle(
color: Colors.white,
fontFamily: MyFonts.openSansRegular)),
color: Colors.transparent,
onPressed: () {
/* LoginData data = new LoginData.section("+919061855558", "abc#123ABC");
_registerUser(data);*/
// confirm();
Navigator.push(context,
MaterialPageRoute(builder: (BuildContext context) {
return ForgotPassword();
// return NoticeType();
}));
},
),
)
],
),
),
)
],
),
);
bottom overflowed when keyboard shows error removing resizeToAvoidBottomInset: false.

Wrap your Stack Widget with a Container and use Single Child Scroll View on that Container.
Also, assign the height and width of the Container over the Stack to avoid Box Constraints taking infinite size.
return new Scaffold(
backgroundColor: Colors.grey,
appBar:
PreferredSize(child: Container(), preferredSize: Size.fromHeight(0)),
body: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Stack(
children: <Widget>[
Container(
child: Image.network(
'https://wizardsourcer.com/wp-content/uploads/2019/03/Stackoverflow.png'),
width: double.infinity,
height: double.infinity,
),
Container(color: Colors.grey[600]),
Container(
padding: EdgeInsets.symmetric(vertical: 30, horizontal: 30),
width: double.infinity,
height: double.infinity,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(height: 30),
Text("Welcome!"),
Container(height: 5),
Text(
'School Name',
),
Container(height: 10),
Container(
width: 120,
height: 120,
child: Image.network(
'https://wizardsourcer.com/wp-content/uploads/2019/03/Stackoverflow.png'),
),
Container(height: 10),
Container(height: 3, width: 40, color: Colors.white),
Container(height: 5),
Text(
"Log in",
),
SizedBox(),
TextField(
style: TextStyle(color: Colors.white),
keyboardType: TextInputType.number,
decoration: InputDecoration(
labelText: "USERNAME",
labelStyle: TextStyle(
color: Colors.white,
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 1),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 2),
),
),
),
Container(height: 25),
TextField(
style: TextStyle(color: Colors.white),
keyboardType: TextInputType.text,
decoration: InputDecoration(
labelText: "PASSWORD",
labelStyle: TextStyle(
color: Colors.white,
),
enabledBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.white, width: 1),
),
focusedBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.white, width: 2),
),
suffixIcon: GestureDetector(
onTap: () {
// setState(() {
// _obscureText = !_obscureText;
// });
},
child:
Icon(Icons.visibility_off, color: Colors.white),
)),
),
Container(height: 20),
FloatingActionButton(
heroTag: "fab",
elevation: 0,
backgroundColor: Colors.white,
child: Icon(Icons.chevron_right, color: Colors.cyan[800]),
onPressed: () {
/* Navigator.push(context, MaterialPageRoute(builder: (BuildContext context){
return DashboardRoute(schoolDetails);
//return NoticeType();
}));*/
// LoginData data = new LoginData.section("sahood#traxsmart.in", "abc#123ABC");
// progressDialog.show();
// LoginData data = new LoginData.section(
// nameController.text, passwordController.text);
// _signIn(data);
},
),
SizedBox(),
Container(
width: double.infinity,
child: FlatButton(
child: Text("forgot password?",
style: TextStyle(
color: Colors.white,
)),
color: Colors.transparent,
onPressed: () {
/* LoginData data = new LoginData.section("+919061855558", "abc#123ABC");
_registerUser(data);*/
// confirm();
// Navigator.push(context,
// MaterialPageRoute(builder: (BuildContext context) {
// return ForgotPassword();
// // return NoticeType();
// }));
},
),
)
],
),
)
],
),
),
),
);

The problem is You used a SIngleCHildScrollView() inside the stack that's why when the soft keyboard shows up its saying bottom overflow.
Solution:
remove the SingleChildScrollView() from inside stack
Wrap your Stack() with a Container()
And finally wrap your Container( with 'SIngleChildScrollView()'
return new Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: MyColors.gray_dark,
appBar:
PreferredSize(child: Container(), preferredSize: Size.fromHeight(0)),
body: SingleChildScrollView(
child: COntainer(
child: Stack(
children: <Widget>[
Container(
child: Image.asset(
'assets/images/air_force_golden_jubilee_campus.jpeg',
fit: BoxFit.cover),
width: double.infinity,
height: double.infinity,
),
Container(color: MyColors.primaryDark.withOpacity(0.9)),
Container(
padding: EdgeInsets.symmetric(vertical: 30, horizontal: 30),
width: double.infinity,
height: double.infinity,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(height: 30),
Text("Welcome!",
style: MyText.display2(context).copyWith(
color: Colors.white, fontFamily: MyFonts.openSansBold)),
Container(height: 5),
Text(schoolDetails.schoolName,
style: MyText.title(context).copyWith(
color: Colors.white,
fontWeight: FontWeight.w300,
fontFamily: MyFonts.openSansRegular)),
Container(height: 10),
Container(
width: 120,
height: 120,
child: Image.asset(
'assets/images/schools/air_force_bal_bharati_logo.png'),
),
Container(height: 10),
Container(height: 3, width: 40, color: Colors.white),
Container(height: 5),
Text("Log in",
style: MyText.medium(context).copyWith(
color: Colors.white,
fontWeight: FontWeight.bold,
fontFamily: MyFonts.openSansBold)),
SizedBox(),
TextField(
controller: nameController,
style: TextStyle(color: Colors.white),
keyboardType: TextInputType.number,
decoration: InputDecoration(
labelText: "USERNAME",
labelStyle: TextStyle(
color: Colors.white,
fontFamily: MyFonts.openSansRegular),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 1),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 2),
),
),
),
Container(height: 25),
TextField(
style: TextStyle(color: Colors.white),
controller: passwordController,
keyboardType: TextInputType.text,
obscureText: _obscureText,
decoration: InputDecoration(
labelText: "PASSWORD",
labelStyle: TextStyle(
color: Colors.white,
fontFamily: MyFonts.openSansRegular),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 1),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 2),
),
suffixIcon: GestureDetector(
onTap: () {
setState(() {
_obscureText = !_obscureText;
});
},
child: Icon(
_obscureText
? Icons.visibility
: Icons.visibility_off,
color: Colors.white),
)),
),
Container(height: 20),
FloatingActionButton(
heroTag: "fab",
elevation: 0,
backgroundColor: Colors.white,
child: Icon(Icons.chevron_right, color: Colors.cyan[800]),
onPressed: () {
/* Navigator.push(context, MaterialPageRoute(builder: (BuildContext context){
return DashboardRoute(schoolDetails);
//return NoticeType();
}));*/
// LoginData data = new LoginData.section("sahood#traxsmart.in", "abc#123ABC");
progressDialog.show();
LoginData data = new LoginData.section(
nameController.text, passwordController.text);
_signIn(data);
},
),
SizedBox(),
Container(
width: double.infinity,
child: FlatButton(
child: Text("forgot password?",
style: TextStyle(
color: Colors.white,
fontFamily: MyFonts.openSansRegular)),
color: Colors.transparent,
onPressed: () {
/* LoginData data = new LoginData.section("+919061855558", "abc#123ABC");
_registerUser(data);*/
// confirm();
Navigator.push(context,
MaterialPageRoute(builder: (BuildContext context) {
return ForgotPassword();
// return NoticeType();
}));
},
),
)
],
),
),
],
),
),),
);

qrScanner inside Expanded layer, How to add two button in Flutter

In flutter, I want to make an application that scans qr code and display the qr text.
I have two buttons, which are done, scan again.
And how to put that 2 button, bottom of that scan area. If i try to put that button inside expanded layer, it looks all red
Here is the code & screenshot.
How can i solve this ?
import 'package:flutter/material.dart';
import 'package:qr_code_scanner/qr_code_scanner.dart';
import 'package:qr_code_scanner/qr_scanner_overlay_shape.dart';
void main() => runApp(MaterialApp(home: QRSCAN()));
const flash_on = "FLASH ON";
const flash_off = "FLASH OFF";
const front_camera = "FRONT CAMERA";
const back_camera = "BACK CAMERA";
class QRSCAN extends StatefulWidget {
const QRSCAN({
Key key,
}) : super(key: key);
#override
State<StatefulWidget> createState() => _QRSCANState();
}
class _QRSCANState extends State<QRSCAN> {
bool Done_Button = false;
var qrText = "";
QRViewController controller;
final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.blueAccent),
onPressed: () {
Navigator.pop(context);
controller?.pauseCamera();
},
),
elevation: 0.0,
backgroundColor: Colors.white,
actions: <Widget>[
IconButton(
icon: Icon(Icons.help_outline, color: Colors.grey,),
onPressed: () {},
),
],
),
body: Column(
children: <Widget>[
Expanded(
child: QRView(
key: qrKey,
onQRViewCreated: _onQRViewCreated,
overlay: QrScannerOverlayShape(
borderColor: Colors.blueAccent,
borderRadius: 10,
borderLength: 130,
borderWidth: 5,
overlayColor: Color(0xff010040),
),
),
flex: 4,
),
Expanded(
child: FittedBox(
fit: BoxFit.contain,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text("$qrText", style: TextStyle(color: Colors.black,),),
InkWell(
onTap: () async {
Navigator.pop(context);
},
child: Container(
width: 100.0,
height: 50.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
gradient: LinearGradient(colors: [
Color(0xFF1E75BB),
Color(0xFF1EEABB),
])),
child: Center(
child: Text(
'Done',
style: TextStyle(
color: Colors.white,
letterSpacing: 1.5,
fontSize: 12.0,
fontWeight: FontWeight.bold,
fontFamily: 'Play',
),
),
),
),
),
SizedBox(
height: 25,
),
InkWell(
onTap: () async {
setState(() {
qrText = "";
controller?.resumeCamera();
Done_Button = false;
});
},
child: Container(
width: 100.0,
height: 50.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
gradient: LinearGradient(colors: [
Color(0xFF1E75BB),
Color(0xFF1EEABB),
])),
child: Center(
child: Text(
'Again',
style: TextStyle(
color: Colors.white,
letterSpacing: 1.5,
fontSize: 12.0,
fontWeight: FontWeight.bold,
fontFamily: 'Play',
),
),
),
),
),
],
),
),
flex: 1,
),
],
),
);
}
_isFlashOn(String current) {
return flash_on == current;
}
_isBackCamera(String current) {
return back_camera == current;
}
void _onQRViewCreated(QRViewController controller) {
this.controller = controller;
controller.scannedDataStream.listen((scanData) {
setState(() {
qrText = scanData;
controller?.pauseCamera();
Done_Button = true;
});
});
}
#override
void dispose() {
controller.dispose();
super.dispose();
}
}

you can refactor your code as follows
` Column(children: <Widget>[
/* QRView(
key: qrKey,
onQRViewCreated: _onQRViewCreated,
overlay: QrScannerOverlayShape(
borderColor: Colors.blueAccent,
borderRadius: 10,
borderLength: 130,
borderWidth: 5,
overlayColor: Color(0xff010040),
),
),*/
SizedBox(height:5),
Center(
child: Container(height: 100, color: Colors.white, width: 100),
),
Text(
"$qrText",
style: TextStyle(
color: Colors.black,
),
),
InkWell(
onTap: () async {
Navigator.pop(context);
},
child: Container(
width: 100.0,
height: 50.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
gradient: LinearGradient(colors: [
Color(0xFF1E75BB),
Color(0xFF1EEABB),
])),
child: Center(
child: Text(
'Done',
style: TextStyle(
color: Colors.white,
letterSpacing: 1.5,
fontSize: 12.0,
fontWeight: FontWeight.bold,
fontFamily: 'Play',
),
),
),
),
),
SizedBox(
height: 25,
),
InkWell(
onTap: () async {
setState(() {
qrText = "";
// controller?.resumeCamera();
// Done_Button = false;
});
},
child: Container(
width: 100.0,
height: 50.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
gradient: LinearGradient(colors: [
Color(0xFF1E75BB),
Color(0xFF1EEABB),
])),
child: Center(
child: Text(
'Again',
style: TextStyle(
color: Colors.white,
letterSpacing: 1.5,
fontSize: 12.0,
fontWeight: FontWeight.bold,
fontFamily: 'Play',
),
),
),
),
),
]),
);`

How to show a Count down Timer within and Alertbox in flutter

i have a Flutter app which should show a counting down timer in an alert box for Phone code confirming (i need this timer to resend the code to my user when 60 second is up) , i start timer when i click on Confirm Button , but the problem is that the timer is not showing that he's going down he stills with a fixed value.
here is my alert box
Alert Box with timer NOT SHOWING COUNT DOWN
here is my timer Function :
int _counter = 60;
Timer _timer;
void _startTimer(){
_counter = 60;
if(_timer != null){
_timer.cancel();
}
_timer = Timer.periodic(Duration(seconds: 1), (timer){
setState(() {
(_counter > 0) ? _counter-- : _timer.cancel();
});
});
}
here is my alert Box code :
void alertD(BuildContext ctx) {
var alert = AlertDialog(
// title: Center(child:Text('Enter Code')),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20.0))),
backgroundColor: Colors.grey[100],
elevation: 0.0,
content: Container(
height: 215,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
top: 10, left: 10, right: 10, bottom: 15),
child: Text(
'Enter Code',
style: TextStyle(
color: Colors.green[800],
fontWeight: FontWeight.bold,
fontSize: 16
),
)),
Container(
height: 70,
width: 180,
child: TextFormField(
style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.green, width: 0.0)),
),
keyboardType: TextInputType.number,
maxLength: 10,
),
),
SizedBox(
height: 1,
),
Text('00:$_counter'),
SizedBox(height: 15,)
,
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(25),
child: Material(
child: InkWell(
onTap: () {
Navigator.of(ctx).pushNamed(SignUpScreenSecond.routeName);
},
child: Container(
width: 100,
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
gradient: LinearGradient(
colors: [
Colors.green,
Colors.grey,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight),
),
child: Center(
child: Text(
'Validate',
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold),
)),
),
),
),
),
ClipRRect(
borderRadius: BorderRadius.circular(25),
child: Material(
child: InkWell(
onTap: () {},
child: Container(
width: 100,
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
gradient: LinearGradient(
colors: [
Colors.grey,
Colors.green,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight),
),
child: Center(
child: Text(
'Resend',
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold),
)),
),
),
),
)
],
), //new column child
],
),
));
showDialog(
context: ctx,
builder: (BuildContext c) {
return alert;
});
}
that's how i'm calling my alert dialog and my timer when i click Confirm Button :
onTap: () {
_startTimer;
alertD(context);
},

You can copy paste run full code below
You can use StreamBuilder and StreamController
AlertDialog content continually receive stream int from Timer
code snippet
StreamController<int> _events;
#override
initState() {
super.initState();
_events = new StreamController<int>();
_events.add(60);
}
...
_timer = Timer.periodic(Duration(seconds: 1), (timer) {
(_counter > 0) ? _counter-- : _timer.cancel();
print(_counter);
_events.add(_counter);
});
...
content: StreamBuilder<int>(
stream: _events.stream,
builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
...
Text('00:${snapshot.data.toString()}'),
working demo
full code
import 'package:flutter/material.dart';
import 'dart:async';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
StreamController<int> _events;
#override
initState() {
super.initState();
_events = new StreamController<int>();
_events.add(60);
}
Timer _timer;
void _startTimer() {
_counter = 60;
if (_timer != null) {
_timer.cancel();
}
_timer = Timer.periodic(Duration(seconds: 1), (timer) {
//setState(() {
(_counter > 0) ? _counter-- : _timer.cancel();
//});
print(_counter);
_events.add(_counter);
});
}
void alertD(BuildContext ctx) {
var alert = AlertDialog(
// title: Center(child:Text('Enter Code')),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20.0))),
backgroundColor: Colors.grey[100],
elevation: 0.0,
content: StreamBuilder<int>(
stream: _events.stream,
builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
print(snapshot.data.toString());
return Container(
height: 215,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
top: 10, left: 10, right: 10, bottom: 15),
child: Text(
'Enter Code',
style: TextStyle(
color: Colors.green[800],
fontWeight: FontWeight.bold,
fontSize: 16),
)),
Container(
height: 70,
width: 180,
child: TextFormField(
style: TextStyle(
fontSize: 20, fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.green, width: 0.0)),
),
keyboardType: TextInputType.number,
maxLength: 10,
),
),
SizedBox(
height: 1,
),
Text('00:${snapshot.data.toString()}'),
SizedBox(
height: 15,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(25),
child: Material(
child: InkWell(
onTap: () {
//Navigator.of(ctx).pushNamed(SignUpScreenSecond.routeName);
},
child: Container(
width: 100,
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
gradient: LinearGradient(
colors: [
Colors.green,
Colors.grey,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight),
),
child: Center(
child: Text(
'Validate',
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold),
)),
),
),
),
),
ClipRRect(
borderRadius: BorderRadius.circular(25),
child: Material(
child: InkWell(
onTap: () {},
child: Container(
width: 100,
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
gradient: LinearGradient(
colors: [
Colors.grey,
Colors.green,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight),
),
child: Center(
child: Text(
'Resend',
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold),
)),
),
),
),
)
],
), //new column child
],
),
);
}));
showDialog(
context: ctx,
builder: (BuildContext c) {
return alert;
});
}
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
onPressed: () {
_startTimer();
alertD(context);
},
child: Text('Click')),
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}