Alert Dialog not working as expected in flutter - flutter

Question

I was trying to show 2 dialog same time and when i open second dialog, its not focusing on the widget that was in second dialog, its focusing on the widget thats on first dialog that i have opened before.
Is this issue or am i not supposed to open 2 dialog at same time?
Here is video to the issue
Here is first dialog code
showDialog(
context: context,
builder: (_) =>
AlertDialog(
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Container(
width: 16,
height: 32,
decoration: BoxDecoration(
color: AppColors.colorFFBC99,
borderRadius: BorderRadius.circular(4),
),
),
const SizedBox(
width: 16,
),
Text(
S.addaRecipe,
style: Theme.of(context).textTheme.headlineSmall!.copyWith(
fontWeight: FontWeight.w600,
color: Colors.black,
),
),
],
),
SizedBox(
width: 300,
child: Row(
children: [
Text(
S.recipeBy,
style: Theme.of(context)
.textTheme
.labelLarge!
.copyWith(fontWeight: FontWeight.w500),
),
SizedBox(
width: 8,
),
Expanded(
child: CustomMyDropDownButton(label: 'dsfsdsf'),
),
],
),
)
],
),
content: Form(
// key: formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const SizedBox(
height: 16,
),
Text(
S.addPhotos,
style: Theme.of(context)
.textTheme
.labelLarge!
.copyWith(fontWeight: FontWeight.w500),
),
const SizedBox(
height: 8,
),
Container(
width: double.infinity,
// height: 200,
color: Colors.white,
child: Wrap(
children: [
for (int i = 0; i < 10; i++)
Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
width: 200,
height: 200,
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.network(
S.recipeNetworkImage,
fit: BoxFit.cover,
),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: InkWell(
onTap: () {},
child: Container(
decoration: BoxDecoration(
color: Colors.grey.shade100,
borderRadius: BorderRadius.circular(8),
),
width: 200,
height: 200,
child: const Center(
child: Icon(
Icons.add,
size: 32,
),
),
),
),
),
],
),
),
const SizedBox(
height: 16,
),
CustomTextField(
showLabel: true,
// controller: textEditingController,
label: S.recipeName,
validator: (v) {
if (v!.isEmpty) {
return 'This field is required';
}
return null;
},
),
const SizedBox(
height: 16,
),
CustomTextField(
showLabel: true,
// controller: textEditingController,
label: S.description,
validator: (v) {
if (v!.isEmpty) {
return 'This field is required';
}
return null;
},
),
const SizedBox(
height: 32,
),
Row(
children: [
Text(
S.nutritionalInfo,
style: Theme.of(context)
.textTheme
.labelLarge!
.copyWith(fontWeight: FontWeight.w500),
),
IconButton(
onPressed: () {
showDialog(
context: context,
builder: (_) => AlertDialog(
title: const Text(
S.addNutrition,
),
content: Column(
mainAxisSize: MainAxisSize.min,
children: const [
CustomTextField(
showLabel: true,
label: S.name,
),
CustomTextField(
showLabel: true,
label: S.value,
),
],
),
actions: [
CustomOutlinedButton(
name: S.close,
onPress: () {
context.pop();
}),
CustomElevatedButton(
name: S.add,
onPress: () {},
),
],
),
);
},
icon: const Icon(Icons.add),
)
],
),
const SizedBox(
height: 8,
),
Container(
padding: EdgeInsets.all(8),
color: Colors.grey.shade100,
child: 1 == 1
? Text(
"Nutrition Info....",
)
: Column(
children: [
for (int i = 0; i < 0; i++)
ListTile(
leading:
Icon(Icons.horizontal_split_rounded),
title: Text('Calories'),
subtitle: Text('237'),
trailing: IconButton(
onPressed: () {},
icon: Icon(Icons.delete),
),
),
],
),
),
const SizedBox(
height: 32,
),
Text(
S.steps,
style: Theme.of(context)
.textTheme
.labelLarge!
.copyWith(fontWeight: FontWeight.w500),
),
const SizedBox(
height: 8,
),
Container(
color: AppColors.colorF4F4F4,
height: 300,
width: MediaQuery.of(context).size.width * .8,
child: HtmlEditor(
controller: HtmlEditorController(),
htmlEditorOptions: const HtmlEditorOptions(
hint: "Steps....",
),
otherOptions: const OtherOptions(
height: 400,
decoration: BoxDecoration(color: Colors.red)),
),
),
const SizedBox(
height: 32,
),
],
),
),
),
const SizedBox(
height: 32,
),
Stack(
children: [
Text(
'',
maxLines: 3,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.bodyMedium!.copyWith(
color: Colors.red,
),
),
Text(
'',
maxLines: 3,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.bodyMedium!.copyWith(
color: Colors.green,
),
),
],
),
],
),
),
actions: [
CustomOutlinedButton(
name: S.close,
onPress: () {
context.pop();
}),
CustomElevatedButton(
name: S.add,
onPress: () {},
),
],
);
Here is the code of second dialog show dialog
showDialog(
context: context,
builder: (_) => AlertDialog(
title: const Text(
S.addNutrition,
),
content: Column(
mainAxisSize: MainAxisSize.min,
children: const [
CustomTextField(
showLabel: true,
label: S.name,
),
CustomTextField(
showLabel: true,
label: S.value,
),
],
),
actions: [
CustomOutlinedButton(
name: S.close,
onPress: () {
context.pop();
}),
CustomElevatedButton(
name: S.add,
onPress: () {},
),
],
),
);
Here is customtextfield code
import 'package:flutter/material.dart';
class CustomTextField extends StatefulWidget {
final String? label;
final TextEditingController? controller;
final String? Function(String?)? validator;
final Function(String?)? onSaved;
final bool showLabel;
final bool enableSuggestions;
final bool autocorrect;
final TextInputType? keyBoardType;
final Function(String)? onChange;
final bool showSuffixIcon;
const CustomTextField({
Key? key,
this.label,
this.controller,
this.validator,
this.onSaved,
this.enableSuggestions = true,
this.autocorrect = true,
this.keyBoardType,
this.onChange,
this.showSuffixIcon = false,
this.showLabel = false,
}) : super(key: key);
#override
State<CustomTextField> createState() => _CustomTextFieldState();
}
class _CustomTextFieldState extends State<CustomTextField> {
final textFieldFocusNode = FocusNode();
bool _obscured = false;
#override
void initState() {
// TODO: implement initState
if (widget.showSuffixIcon) {
_obscured = true;
}
super.initState();
}
void _toggleObscured() {
setState(() {
_obscured = !_obscured;
if (textFieldFocusNode.hasPrimaryFocus)
return; // If focus is on text field, dont unfocus
textFieldFocusNode.canRequestFocus =
false; // Prevents focus if tap on eye
});
}
#override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
widget.showLabel
? Text(
widget.label!,
style: Theme.of(context)
.textTheme
.labelLarge!
.copyWith(fontWeight: FontWeight.w500),
)
: const SizedBox(),
SizedBox(
height: widget.showLabel ? 8 : 0,
),
TextFormField(
controller: widget.controller,
validator: widget.validator,
onSaved: widget.onSaved,
onChanged: widget.onChange,
focusNode: textFieldFocusNode,
obscureText: _obscured,
enableSuggestions: widget.enableSuggestions,
autocorrect: widget.autocorrect,
keyboardType: widget.keyBoardType,
decoration: InputDecoration(
isDense: true,
enabledBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(8),
),
borderSide: BorderSide(
color: Colors.black12,
),
),
focusedBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(8),
),
borderSide: BorderSide(
color: Colors.black12,
),
),
errorBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(8),
),
borderSide: BorderSide(
color: Colors.red,
),
),
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(8),
),
borderSide: BorderSide(
color: Colors.black12,
),
),
labelText: widget.showLabel ? null : widget.label,
// labelStyle: CustomTextStyle.kTextStyle16400.copyWith(
// color: AppColors.textColor2,
// ),
suffixIcon: widget.showSuffixIcon
? Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 4, 0),
child: GestureDetector(
onTap: _toggleObscured,
child: Icon(
_obscured
? Icons.visibility_rounded
: Icons.visibility_off_rounded,
size: 24,
color: Colors.grey,
),
),
)
: null,
),
),
],
);
}
}

Answer 1

Try to add autofocus: true, on your CustomTextField. It should do handle rest I believe.
TextField(
autofocus: true,
);