Develop Reference

how can make this two circular containers selectable?

I am new to flutter
and a lot of things I'm ignorant about
my problem is how can i make these two circular containers looks selectable, which is means when click on (eg: Teacher) and press GO!, its functionally work and navigate to another screen but the problem it's doesn't shows that the container is selected!
and the another problem is when the user click on how they are
i want the color of the go button changes from light purple to dark purple !
although i have tried SelectableContainer but it didn't work as i want
this is how i want it !
this is how i want it
and this is how i apply it :
this is how i apply it
and this is my code !!!
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:blackboard/setting/colors.dart';
import 'package:blackboard/view/welcome1.dart';
import 'package:blackboard/setting/tapbar.dart';
class AreYou1 extends StatefulWidget {
const AreYou1({Key? key}) : super(key: key);
#override
_AreYou1State createState() => _AreYou1State();
}
class _AreYou1State extends State<AreYou1> {
int select = 0;
bool _select1 = false;
bool _select2 = false;
#override
void initState() {
// TODO: implement initState
super.initState();
select = 0;
}
#override
Widget build(BuildContext context) {
//Teacher Button
final TeacherButton = Material(
color: Colors.transparent,
child: Container(
width: 150,
height: 150,
decoration: BoxDecoration(
color: BBColors.circle4,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black54.withOpacity(0.3),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
child: MaterialButton(
minWidth: MediaQuery.of(context).size.width / 1.3,
onPressed: () {
setState(() {
select = 0;
});
},
child: Image.asset(
"assets/images/teacher.png",
fit: BoxFit.cover,
),
)),
);
//Student Button
final StudentButton = Material(
color: Colors.transparent,
child: Container(
width: 150,
height: 150,
decoration: BoxDecoration(
color: BBColors.circle4,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black54.withOpacity(0.3),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
child: MaterialButton(
padding: EdgeInsets.fromLTRB(20, 15, 20, 15),
minWidth: MediaQuery.of(context).size.width / 1.3,
onPressed: () {
setState(() {
select = 1;
});
},
child: Image.asset(
"assets/images/student.png",
fit: BoxFit.cover,
),
)));
return Scaffold(
backgroundColor: BBColors.bg4,
body: Stack(
alignment: Alignment.center,
fit: StackFit.expand,
overflow: Overflow.clip,
children: [
Positioned(
right: -160,
top: -160,
child: Container(
width: 400,
height: 400,
decoration: BoxDecoration(
color: Colors.transparent,
shape: BoxShape.circle,
border: Border.all(
color: BBColors.primary3,
),
),
)),
Positioned(
right: 20,
top: 30,
child: Container(
width: 150,
height: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: BBColors.circle5,
),
)),
Positioned(
left: -160,
bottom: -160,
child: Container(
width: 400,
height: 400,
decoration: BoxDecoration(
color: Colors.transparent,
shape: BoxShape.circle,
border: Border.all(
color: BBColors.primary3,
),
),
)),
Positioned(
left: 20,
bottom: 30,
child: Container(
width: 150,
height: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: BBColors.circle5,
),
)),
Positioned(
left: 120,
top: 250,
child: Text(
"Are You ? ",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 50,
color: Colors.black,
fontFamily: 'Ruda',
fontWeight: FontWeight.bold),
)),
Positioned(
top: 350,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
TeacherButton,
SizedBox(
width: 40,
),
StudentButton,
]),
),
Positioned(
top: 605,
left: 120,
child: Card(
color: Colors.white24,
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(60),
),
child: Container(
decoration: BoxDecoration(
color: BBColors.primary5,
borderRadius: BorderRadius.all(Radius.circular(60)),
),
child: MaterialButton(
padding: EdgeInsets.fromLTRB(20, 15, 20, 15),
minWidth: MediaQuery.of(context).size.width / 2.3,
onPressed: () {
if (select == 0) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Welcome1()));
} else {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TapBar()));
}
},
child: Text(
"GO !",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 40,
color: BBColors.font1,
fontFamily: 'Ruda',
fontWeight: FontWeight.bold),
),
)))),
]));
}
}

You can check below code I create new TeacherButton and StudentButton like you want.
bool isSelectTeacher = false;
New TeacherButton:
final TeacherButton = Material(
color: Colors.transparent,
child: Container(
width: 150,
height: 150,
decoration: BoxDecoration(
color: Colors.pink.shade400,
shape: BoxShape.circle,
border: Border.all(
width: isSelectTeacher ? 8 : 0,
color: Colors.purple,
),
boxShadow: [
BoxShadow(
color: Colors.black54.withOpacity(0.3),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
child: Stack(
children: [
MaterialButton(
minWidth: MediaQuery.of(context).size.width / 1.3,
onPressed: () {
setState(() {
isSelectTeacher = true;
});
},
child: Container(),
),
Container(
alignment: Alignment.bottomRight,
child: Icon(Icons.verified, size: (isSelectTeacher ? 30 : 0)),
),
],
),
),
);
New StudentButton:
final StudentButton = Material(
color: Colors.transparent,
child: Container(
width: 150,
height: 150,
decoration: BoxDecoration(
color: Colors.pink.shade400,
shape: BoxShape.circle,
border: Border.all(
width: isSelectTeacher ? 0 : 8,
color: Colors.purple,
),
boxShadow: [
BoxShadow(
color: Colors.black54.withOpacity(0.3),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
child: Stack(
children: [
MaterialButton(
padding: EdgeInsets.fromLTRB(20, 15, 20, 15),
minWidth: MediaQuery.of(context).size.width / 1.3,
onPressed: () {
setState(() {
isSelectTeacher = false;
});
},
child: Container(),
),
Container(
alignment: Alignment.bottomRight,
child: Icon(Icons.verified, size: (isSelectTeacher ? 0 : 30)),
),
],
),
),
);

carousel slider "A RenderFlex overflowed by Infinity pixels on the bottom." flutter

I am building a home page for that I have created a hidden drawer on a separate page and a home screen on separate and stack both 'hidden drawer & 'home screen on the home page and also created foldable search button on the home screen along with the menu button on the same row with margin:spaceBetween .
I have created carousel slider on a separate page for 2nd row on home page i.e. down below the search & menu button and call that carousel slider on home page but showing error
"A RenderFlex overflowed by Infinity pixels on the bottom"
And why is it on bottom when I tried to add it on top. I have tried every possible padding & spacing but nothing work, please help
DevTools layout
Code of home screen
class HomeScreen extends StatefulWidget {
HomeScreen({Key? key}) : super(key: key);
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
bool _folded = true;
#override
Widget build(BuildContext context) {
return AnimatedContainer(
duration: Duration(milliseconds: 250),
color: Colors.blueGrey.shade100,
child: Column(
children: [
SizedBox(
height: 40,
),
Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
icon: SvgPicture.asset(
"assets/icons/menu.svg",
),
onPressed: () {},
),
Padding(
padding: const EdgeInsets.only(left: 110),
child: Container(
width: _folded ? 52 : 250,
height: getProportionateScreenHeight(50),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(32),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.brown.shade300.withOpacity(0.3),
spreadRadius: 0,
blurRadius: 8,
offset: Offset(-4, 0),
),
BoxShadow(
color: Colors.grey.withOpacity(0.3),
spreadRadius: 0,
blurRadius: 8,
offset: Offset(4, 0),
),
BoxShadow(
color: Colors.brown.shade300.withOpacity(0.3),
spreadRadius: 0,
blurRadius: 8,
offset: Offset(-4, 0),
),
BoxShadow(
color: Colors.grey.withOpacity(0.3),
spreadRadius: 0,
blurRadius: 8,
offset: Offset(4, 0),
),
]),
child: Row(
children: [
Expanded(
child: Container(
padding: EdgeInsets.only(left: 16),
child: !_folded
? TextField(
decoration: InputDecoration(
hintText: 'Search Book, Author,Genre ',
hintStyle: TextStyle(
color: Colors.black54,
fontFamily:
GoogleFonts.oregano().fontFamily,
),
border: InputBorder.none,
),
)
: null,
),
),
AnimatedContainer(
duration: Duration(milliseconds: 400),
child: Material(
type: MaterialType.transparency,
child: InkWell(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(_folded ? 32 : 0),
topRight: Radius.circular(32),
bottomLeft: Radius.circular(_folded ? 32 : 0),
bottomRight: Radius.circular(32),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: SvgPicture.asset(
_folded
? "assets/icons/search.svg"
: "assets/icons/close1.svg",
height: getProportionateScreenHeight(18),
color: Colors.black54),
),
onTap: () {
setState(() {
_folded = !_folded;
});
}),
),
)
],
),
),
),
],
),
Row(
children: [ImageSlider()],
)
],
),
);
}
}
Code OF the carousel slider
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: [
CarouselSlider(
items: [
//1st ImageSlider
Container(
padding: EdgeInsets.only(bottom: 20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: AssetImage("assets/images/13.jpg"),
fit: BoxFit.cover,
),
),
),
//2nd Image of Slider
Container(
padding: EdgeInsets.only(bottom: 20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: AssetImage("assets/images/15.jpg"),
fit: BoxFit.cover,
),
),
),
//3rd Image of Slider
Container(
margin: EdgeInsets.all(6.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: AssetImage("assets/images/3.jpg"),
fit: BoxFit.cover,
),
),
),
],
//Slider Container properties
options: CarouselOptions(
// height: getProportionateScreenHeight(50),
height: 50,
autoPlay: true,
reverse: true,
enlargeCenterPage: true,
autoPlayInterval: Duration(seconds: 2),
),
),
],
),
);
}

For Single child wrap with Expanded(child: ImageSlider()), and it will take extra spaces.
While using row
Expanded(
child: Row(
children: [
// will take full spaces but width- IconSize
Flexible(
child: ImageSlider(),
),
Icon(Icons.ac_unit),
],
),
),
or just wrap with SizedBox
SizedBox(
height: 200,
child: Row(
/// controll position
children: [
SizedBox(
width: 100,
child: ImageSlider(),
),
Icon(Icons.ac_unit),
],
),
),
Test Widgets
class HomeScreen extends StatefulWidget {
HomeScreen({Key? key}) : super(key: key);
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
bool _folded = true;
#override
Widget build(BuildContext context) {
return Scaffold(
body: AnimatedContainer(
duration: Duration(milliseconds: 250),
color: Colors.blueGrey.shade100,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
height: 40,
),
Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
icon: SvgPicture.asset(
"assets/icons/menu.svg",
),
onPressed: () {},
),
Padding(
padding: const EdgeInsets.only(left: 110),
child: Container(
width: _folded ? 52 : 250,
// height: getProportionateScreenHeight(50),
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(32),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.brown.shade300.withOpacity(0.3),
spreadRadius: 0,
blurRadius: 8,
offset: Offset(-4, 0),
),
BoxShadow(
color: Colors.grey.withOpacity(0.3),
spreadRadius: 0,
blurRadius: 8,
offset: Offset(4, 0),
),
BoxShadow(
color: Colors.brown.shade300.withOpacity(0.3),
spreadRadius: 0,
blurRadius: 8,
offset: Offset(-4, 0),
),
BoxShadow(
color: Colors.grey.withOpacity(0.3),
spreadRadius: 0,
blurRadius: 8,
offset: Offset(4, 0),
),
]),
child: Row(
children: [
Expanded(
child: Container(
padding: EdgeInsets.only(left: 16),
child: !_folded
? TextField(
decoration: InputDecoration(
hintText: 'Search Book, Author,Genre ',
hintStyle: TextStyle(
color: Colors.black54,
fontFamily:
GoogleFonts.oregano().fontFamily,
),
border: InputBorder.none,
),
)
: null,
),
),
AnimatedContainer(
duration: Duration(milliseconds: 400),
child: Material(
type: MaterialType.transparency,
child: InkWell(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(_folded ? 32 : 0),
topRight: Radius.circular(32),
bottomLeft: Radius.circular(_folded ? 32 : 0),
bottomRight: Radius.circular(32),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: SvgPicture.asset(
_folded
? "assets/icons/search.svg"
: "assets/icons/close1.svg",
// height: getProportionateScreenHeight(18),
height: 18,
color: Colors.black54),
),
onTap: () {
setState(() {
_folded = !_folded;
});
}),
),
)
],
),
),
),
],
),
//For Single, will take full spaces
// Expanded(child: ImageSlider()),
/// with rows, could be use [Flexible]
Expanded(
child: Row(
children: [
// will take full spaces but width- IconSize
Flexible(
child: ImageSlider(),
),
Icon(Icons.ac_unit),
],
),
),
/// or just wrap with SizedBOx
SizedBox(
height: 200,
child: Row(
/// controll position
children: [
SizedBox(
width: 100,
child: ImageSlider(),
),
Icon(Icons.ac_unit),
],
),
),
Container(
height: 200,
child: Text("Extra Bottom Part "),
color: Colors.blueGrey,
width: double.infinity,
),
],
),
),
);
}
}
class ImageSlider extends StatefulWidget {
ImageSlider({Key? key}) : super(key: key);
#override
_ImageSliderState createState() => _ImageSliderState();
}
class _ImageSliderState extends State<ImageSlider> {
Widget build(BuildContext context) {
return Scaffold(
body: ListView(children: [
CarouselSlider(
items: [
//1st ImageSlider
Container(
padding: EdgeInsets.only(bottom: 20),
height: 100,
decoration: BoxDecoration(
color: Colors.deepPurple,
borderRadius: BorderRadius.circular(8.0),
// image: DecorationImage(
// image: AssetImage("assets/images/13.jpg"),
// fit: BoxFit.cover,
// ),
),
),
//2nd Image of Slider
Container(
padding: EdgeInsets.only(bottom: 20),
height: 100,
decoration: BoxDecoration(
color: Colors.deepOrange,
borderRadius: BorderRadius.circular(8.0),
// image: DecorationImage(
// image: AssetImage("assets/images/15.jpg"),
// fit: BoxFit.cover,
// ),
),
),
//3rd Image of Slider
Container(
margin: EdgeInsets.all(6.0),
decoration: BoxDecoration(
color: Colors.pinkAccent,
borderRadius: BorderRadius.circular(8.0),
// image: DecorationImage(
// image: AssetImage("assets/images/3.jpg"),
// fit: BoxFit.cover,
// ),
),
),
],
//Slider Container properties
options: CarouselOptions(
// height: getProportionateScreenHeight(50),
height: 50,
autoPlay: true,
reverse: true,
enlargeCenterPage: true,
autoPlayInterval: Duration(seconds: 2),
),
),
]),
);
}
}

wrap Column with SingleChildScrollView
#override
Widget build(BuildContext context) {
return AnimatedContainer(
height: MediaQuery.of(context).size.height,
duration: Duration(milliseconds: 250),
color: Colors.blueGrey.shade100,
child: SingleChildScrollView ( child: Column(
children: [
SizedBox(
height: 40,
),
Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
icon: SvgPicture.asset(
"assets/icons/menu.svg",
),
onPressed: () {},
),
Padding(
padding: const EdgeInsets.only(left: 110),
child: Container(
width: _folded ? 52 : 250,
height: getProportionateScreenHeight(50),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(32),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.brown.shade300.withOpacity(0.3),
spreadRadius: 0,
blurRadius: 8,
offset: Offset(-4, 0),
),
BoxShadow(
color: Colors.grey.withOpacity(0.3),
spreadRadius: 0,
blurRadius: 8,
offset: Offset(4, 0),
),
BoxShadow(
color: Colors.brown.shade300.withOpacity(0.3),
spreadRadius: 0,
blurRadius: 8,
offset: Offset(-4, 0),
),
BoxShadow(
color: Colors.grey.withOpacity(0.3),
spreadRadius: 0,
blurRadius: 8,
offset: Offset(4, 0),
),
]),
child: Row(
children: [
Expanded(
child: Container(
padding: EdgeInsets.only(left: 16),
child: !_folded
? TextField(
decoration: InputDecoration(
hintText: 'Search Book, Author,Genre ',
hintStyle: TextStyle(
color: Colors.black54,
fontFamily:
GoogleFonts.oregano().fontFamily,
),
border: InputBorder.none,
),
)
: null,
),
),
AnimatedContainer(
duration: Duration(milliseconds: 400),
child: Material(
type: MaterialType.transparency,
child: InkWell(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(_folded ? 32 : 0),
topRight: Radius.circular(32),
bottomLeft: Radius.circular(_folded ? 32 : 0),
bottomRight: Radius.circular(32),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: SvgPicture.asset(
_folded
? "assets/icons/search.svg"
: "assets/icons/close1.svg",
height: getProportionateScreenHeight(18),
color: Colors.black54),
),
onTap: () {
setState(() {
_folded = !_folded;
});
}),
),
)
],
),
),
),
],
),
Row(
children: [ImageSlider()],
)
],
),),
);
} ````

How to make validation stepper when form inside bottomsheet?

This app make a stepper. In stepper I build add data and show bottomsheet. In bottomsheet we can add data from there, but in this case how to validate stepper when we click next steps read method bottomsheet (if user not filling field showing error in stepper).
This is the method bottomsheet:
class StepperclassState extends State<Stepperclass> {
void inputRekomen(){
final Formlist formProvider = Provider.of<Formlist>(context, listen: false);
showModalBottomSheet(
//isScrollControlled: true,
context: context,
backgroundColor: Colors.white,
shape : RoundedRectangleBorder(
borderRadius : BorderRadius.vertical( top: Radius.circular(30),)
),
builder: (context) => DraggableScrollableSheet(
expand: false,
builder: (context, scrollController) => SingleChildScrollView(
controller: scrollController,
child: StatefulBuilder(
builder: (BuildContext context, StateSetter stateSetter) {
return Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(
top: Radius.circular(30),
),
color: Color(0xffFFFFF),
),
child: Stack(
children: [
Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(
top: Radius.circular(30),
),
color: white),
child: Stack(
children: [
Padding(
padding: const EdgeInsets.only(top: 15, left: 145),
child: Container(
width: 80, height: 3,
decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(
top: Radius.circular(30),
),
color: Colors.black),
),
),
Padding(
padding: const EdgeInsets.only(top: 30, right: 10, left: 10, bottom: 10),
child: Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(color: Color(0xffDCE9F3),
borderRadius: BorderRadius.circular(30),),
child: Form(
key: formKey3,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 20,),
Container(
child: Padding(
padding: const EdgeInsets.only(left: 20),
child: Text(
'Apa tindakan rekomendasi untuk mencegah kejadian berulang ?', style: blackregstyle.copyWith(
fontSize: 14,
),
),
),
),
SizedBox(height: 30,),
Container(
child: Padding(
padding: const EdgeInsets.only(left: 20),
child: Text(
'Rekomendasi', style: blackregstyle.copyWith(
fontSize: 14,
),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 10, bottom: 20.0, left: 20, right: 20),
child: Container(
decoration: BoxDecoration(
color: Color(0xffffffff),
borderRadius: BorderRadius.circular(16),
),
child: FormBuilderTextField(
validator: FormBuilderValidators.compose([
FormBuilderValidators.required(context, errorText: FormBuilderLocalizations.of(context).requiredErrorText),
FormBuilderValidators.minLength(context, 3, errorText: FormBuilderLocalizations.of(context).minLengthErrorText(3)),
FormBuilderValidators.email(context, errorText: FormBuilderLocalizations.of(context).emailErrorText ),
]),
textAlign: TextAlign.start,
decoration: InputDecoration(
fillColor: Color(0xfffaebeb),
filled: inputteks,
contentPadding: EdgeInsets.all(12),
border: InputBorder.none,
focusedBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: BorderSide(color: Color(0xff3F8AE0) ),
),
focusedErrorBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: BorderSide(color: Color(0xff3F8AE0), width: 1),
),
enabledBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: BorderSide(color: Colors.black, width: 1),
),
errorBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: BorderSide(color: Color(0xffE64646) ),
),
disabledBorder: InputBorder.none,),
autofocus: false,
controller: rekomen,
onChanged: (String value) {
formProvider.tanggaltext(value);
rekomen.selection = TextSelection.fromPosition(TextPosition(offset: rekomen.text.length));
},
),
),
),
Container(
child: Padding(
padding: const EdgeInsets.only(left: 20),
child: Text(
'Penjelasan', style: blackregstyle.copyWith(
fontSize: 14,
),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 10, bottom: 20.0, left: 20, right: 20),
child: Container(
decoration: BoxDecoration(
color: Color(0xffffffff),
borderRadius: BorderRadius.circular(16),
),
child: FormBuilderTextField(
validator: FormBuilderValidators.compose([
FormBuilderValidators.required(context, errorText: FormBuilderLocalizations.of(context).requiredErrorText),
FormBuilderValidators.minLength(context, 3, errorText: FormBuilderLocalizations.of(context).minLengthErrorText(3)),
FormBuilderValidators.email(context, errorText: FormBuilderLocalizations.of(context).emailErrorText ),
]),
textAlign: TextAlign.start,
decoration: InputDecoration(
fillColor: Color(0xfffaebeb),
filled: inputteks,
contentPadding: EdgeInsets.all(12),
border: InputBorder.none,
focusedBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: BorderSide(color: Color(0xff3F8AE0) ),
),
focusedErrorBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: BorderSide(color: Color(0xff3F8AE0), width: 1),
),
enabledBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: BorderSide(color: Colors.black, width: 1),
),
errorBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: BorderSide(color: Color(0xffE64646) ),
),
disabledBorder: InputBorder.none,),
autofocus: false,
controller: penjelasan,
onChanged: (String value) {
formProvider.tanggaltext(value);
penjelasan.selection = TextSelection.fromPosition(TextPosition(offset: penjelasan.text.length));
},
),
),
),
Container(
child: Padding(
padding: const EdgeInsets.only(left: 20),
child: Text(
'Penanggung Jawab Tindakan Rekomendasi:', style: blackregstyle.copyWith(
fontSize: 14,
),
),
),
),
SizedBox(height: 5,),
Padding(
padding: const EdgeInsets.only(left: 20, right: 20),
child: Container(
width: 280,
decoration: BoxDecoration(
color: Color(0xffffffff),
borderRadius: BorderRadius.circular(16),
),
child: Padding(
padding: const EdgeInsets.only(left: 20, right: 5),
),
),
),
Column(
children: [
SizedBox(height: 5,),
Padding(
padding: const EdgeInsets.only(top: 10, right: 25, left: 25),
child: Container(
width: 315,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
border: Border.all(color: Colors.black),
),
constraints: BoxConstraints(
minHeight: 45,
minWidth: 315,
),
child: Row(
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.all(12),
child: GestureDetector(
onTap: () {
stateSetter(() {
showdropdown = showdropdown == true ? false : true;
});
print(showdropdown);
print(chosenValue1);
},
child: chosenValue == -1 ? Text(
'Penanggung Jawab'
) : Text(
'${penanggung[chosenValue]}'
),
)
),),
GestureDetector(
onTap: () {
stateSetter(() {
showdropdown = showdropdown == true ? false : true;
});
print(showdropdown);
print(chosenValue1);
},
child: Icon
(
showdropdown ?
Icons.arrow_drop_up_rounded : Icons.arrow_drop_down_rounded,
),
),
],
),
),
),
Visibility(
visible: showdropdown,
child: Stack(
children: [
Container(
height: 100,
width: 290,
decoration: BoxDecoration(
color: Colors.white,
),
child: Padding(
padding: const EdgeInsets.only(left: 5),
child: ListView.builder(
scrollDirection: Axis.vertical,
itemCount: penanggung.length,
itemBuilder: (BuildContext context, int position) {
return InkWell(
onTap: () {
stateSetter(() {
chosenValue = position;
if ( position == 2){
showTextField1 = true;
showdropdown = false;
buttonshow = false;
}
else{
showTextField1 = false;
showdropdown = false;
buttonshow = true;
}
});
},
child: Container(
width: 150,
child: Container(
decoration: (chosenValue==position)
? BoxDecoration(
border: Border.all(color: Colors.green))
: null,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
SizedBox(height: 5,),
Text(penanggung[position], textAlign: TextAlign.left, ),
SizedBox(height: 5,),
],
),
),
),
);
},
),
),
),
],
),
),
],
),
Visibility(
visible: buttonshow,
child: Padding(
padding: const EdgeInsets.only(top: 10, left: 24),
child: Container(
height: 44,
child: RaisedButton(
onPressed: loading ? null : (){ stateSetter(() {
loading = true;
validateAndSave();
formProvider.submit();
}); },
color: Color(0xff4986CC),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(17),
),
child: Text(
'Simpan', style: putihstyle.copyWith(
fontSize: 14,
),
),
),
),
),
),
Center(
child: Column(
children: [
Opacity(opacity: loading ? 1.0 : 0,
child: CircularProgressIndicator(),)
],
),
),
Visibility(
visible: showTextField1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(bottom: 10, left: 24),
child: Container(
height: 40,
child: RaisedButton(
onPressed: loading ? null : (){ stateSetter(() {
loading = true;
validateAndSave();
formProvider.submit();
}); },
color: Color(0xff4986CC),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(17),
),
child: Text(
'Simpan', style: putihstyle.copyWith(
fontSize: 14,
),
),
),
),
),
],
),
),
],
),
),
), ),
],
),
),
],
),
);
}
),
),
),
);
}
}
this is my stepper
#override
Widget build(BuildContext context) {
CoolStep(
title: 'Identitas',
subtitle: 'Isi Identitas Saksi/korban',
alignment: Alignment.topCenter,
content: Stack(
children: [
Padding(
padding: const EdgeInsets.only(bottom: 20),
child: Container(
width: 461,
height: 350,
decoration: BoxDecoration(
color: Color(0xffDCE9F3),
borderRadius: BorderRadius.circular(23),),
child: Padding(
padding: const EdgeInsets.all( 20),
child: Column(
children: [
Container(
width: 221,
height: 146,
),
],
),
),
),
),
Stack(
children: [
Padding(
padding: const EdgeInsets.only(top: 320, left: 250),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
FloatingActionButton(onPressed: () => setState(() {
inputRekomen();
}),
tooltip: 'Tambahkan',
child: Icon(Icons.add,),
backgroundColor: Color(0xff5D99C5),
),
],
),
),
],
),
], ),
validation: () {
return null;
},
),

I am not sure if this can help solve the problem, since the problem is not clear enough.
First, you need to wrap all if the steps form in Form, Set the key from the class property. for example:
final _formKey = GlobalKey<FormState>();
then on build method, on the Form widget set the key:
child: Form(
key: _formKey,
...
and then on each TextFormField, put validator on it for example:
validator: (value) {
if (value!.isEmpty) {
return 'Name is required';
}
return null;
}
then, when you need validation/checking on another methods in bottomsheet just call these function:
if (!_formKey.currentState!.validate()) {
return 'Fill form correctly';
}

http request stop when i made build release flutter

I have a problem with my application,
when I make run in the emulator everything works well.
just when I made build apk, the application stops to get data from API URL, I tried it with debug version and everything works well.
so the problem with release version.
for sure I have internet permission in the Android manifest file.
I'm working with package:dio/dio.dart for HTTP request
Dart Code
import 'package:caro_app/restaurant.dart';
import 'package:caro_app/screens/FadeAnimation.dart';
import 'package:caro_app/screens/restaurant.dart';
import 'package:dio/dio.dart' as http_dio;
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:async';
import 'card.dart';
class HomePageApp extends StatefulWidget {
#override
_HomePageAppState createState() => _HomePageAppState();
}
class _HomePageAppState extends State<HomePageApp> {
Future<List<Restaurant>> _getRestaurantDio() async {
http_dio.Dio dio = http_dio.Dio();
http_dio.Response response = await dio
.get("myurl");
List data = response.data;
return data.map((e) => Restaurant.fromJson(e)).toList();
}
List<Food> food = [];
int sum = 0;
bool isDone = false;
List<Restaurant> allRestaurant = [];
#override
void initState() {
super.initState();
getData();
}
getData() async {
allRestaurant = await _getRestaurantDio();
isDone = true;
setState(() {});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.transparent,
leading: Container(
child: Icon(
Icons.menu,
color: Colors.orange,
),
),
title: Text(
"Bogota",
style: TextStyle(color: Colors.white, fontSize: 25),
),
brightness: Brightness.light,
actions: <Widget>[
IconButton(
icon: Icon(
Icons.notifications_none,
color: Colors.orange,
),
onPressed: () {},
),
IconButton(
icon: Icon(
Icons.shopping_cart,
color: Colors.orange,
),
onPressed: () {
Route route =
MaterialPageRoute(builder: (context) => CartScreen());
Navigator.push(context, route);
},
)
],
),
body: Stack(
children: <Widget>[
Container(
child: Container(
height: 40,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
AspectRatio(
aspectRatio: 2.2 / 1,
child: FadeAnimation(
1,
Container(
margin: EdgeInsets.only(right: 10),
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(20)),
child: Center(
child: Text(
"All",
style:
TextStyle(fontSize: 20, color: Colors.orange),
),
),
)),
),
AspectRatio(
aspectRatio: 2.2 / 1,
child: FadeAnimation(
1.1,
Container(
margin: EdgeInsets.only(right: 10),
child: Center(
child: Text(
"Shaorma",
style:
TextStyle(fontSize: 17, color: Colors.orange),
),
),
)),
),
AspectRatio(
aspectRatio: 2.2 / 1,
child: FadeAnimation(
1.2,
Container(
margin: EdgeInsets.only(right: 10),
child: Center(
child: Text(
"Falafel",
style:
TextStyle(fontSize: 17, color: Colors.orange),
),
),
)),
),
AspectRatio(
aspectRatio: 2.2 / 1,
child: FadeAnimation(
1.3,
Container(
margin: EdgeInsets.only(right: 10),
child: Center(
child: Text(
"Burger",
style:
TextStyle(fontSize: 17, color: Colors.orange),
),
),
)),
),
AspectRatio(
aspectRatio: 2.2 / 1,
child: FadeAnimation(
1.4,
Container(
margin: EdgeInsets.only(right: 10),
child: Center(
child: Text(
"Pizza",
style:
TextStyle(fontSize: 17, color: Colors.orange),
),
),
)),
),
],
),
),
),
Container(
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
padding: EdgeInsets.only(
left: 8.0, right: 8.0, top: 75.0, bottom: 0.0),
child: FutureBuilder(
future: _getRestaurantDio(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
print(snapshot.data);
if (snapshot.data == null) {
return Container(
child: Center(
child: Text('Loading..',style: TextStyle(color:Colors.white),),
),
);
} else {
List<Restaurant> restaurant = snapshot.data;
return GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1),
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index) {
return Container(
child: InkWell(
onTap: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => ItemScreen(
user: restaurant[index],
valueSetter: (selectedProducts) {
setState(() {
restaurant
.add(snapshot.data[index]);
sum = 0;
food.forEach((item) {
sum = sum + item.price;
print(sum);
});
});
})));
},
child: FadeAnimation(
1,
Container(
// height: 250,
width: double.infinity,
padding: EdgeInsets.all(20),
margin: EdgeInsets.only(bottom: 20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
image:
NetworkImage(restaurant[index].img),
fit: BoxFit.cover),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
FadeAnimation(
1,
Text(
restaurant[index].name,
style: TextStyle(
color: Colors.orange,
fontSize: 30,
fontWeight:
FontWeight.bold),
)),
SizedBox(
height: 10,
),
FadeAnimation(
1.1,
Container(
padding:
EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.orange,
borderRadius:
BorderRadius
.circular(
20)),
child: Text(
restaurant[index]
.family,
style: TextStyle(
color: Colors.white,
fontSize: 20),
))),
],
),
),
FadeAnimation(
1.2,
Container(
width: 35,
height: 35,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.orange),
child: Center(
child: Icon(
Icons.favorite_border,
size: 20,
color: Colors.white,
),
),
))
],
),
FadeAnimation(
1.2,
Container(
child: Container(
padding: EdgeInsets.all(9),
width: 200,
decoration: BoxDecoration(
color: Colors.deepOrange,
borderRadius:
BorderRadius.circular(20)),
child: Row(
children: <Widget>[
Icon(Icons.location_on),
SizedBox(
width: 10,
),
Text(
restaurant[index].city,
style: TextStyle(
color: Colors.white,
fontSize: 30,
fontWeight:
FontWeight.bold),
),
],
),
))),
],
),
),
),
),
);
},
);
}
},
),
),
),
],
),
);
}
}
class User {
final String name;
final String family;
final String city;
final String img;
List<String> food;
User(this.name, this.family, this.city, this.img);
}

add internet permission to Manifest file inside the android folder and make true the uses-clear-text-traffic if you get data from non https address;
<manifest ...>
<uses-permission android:name="android.permission.INTERNET" />
<application
...
android:usesCleartextTraffic="true"
...>
...
</application>
</manifest>

Flutter: Unable to make the Form scroll when the Keyboard is open

In my application, I am using a stack and a container. Within the container i have a form and its fields. Below is my code
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class Login extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: LoginUI(),
);
}
}
class LoginUI extends StatefulWidget {
#override
State<StatefulWidget> createState() {
// TODO: implement createState
return LoginState();
}
}
class LoginState extends State<LoginUI> {
final _formKey = GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
return Container(
height: double.infinity,
width: double.infinity,
child:
Stack(
fit: StackFit.loose,
children: <Widget>[
SafeArea(
child: Container(
margin: EdgeInsets.only(top: 25),
child: Image.asset("assets/images/login_image.png"),
),
),
Positioned(
top: 275,
child: Container(
height: 600,
width: MediaQuery.of(context).size.width,
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(40.0),
topRight: const Radius.circular(40.0))),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
child: Container(
margin:
EdgeInsets.only(top: 20, left: 10, right: 10),
child: Image.asset(
"assets/images/logo_2.png"),
),
)
],
),
Form(
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(
top: 40,
),
child: SizedBox(
width: MediaQuery.of(context).size.width * .90,
height: 36,
child: TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
contentPadding: const EdgeInsets.only(
top: 2, bottom: 2, left: 8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
),
hintText: "Phone",
),
),
)),
Container(
margin: EdgeInsets.only(
top: 15,
),
child: SizedBox(
height: 36,
width: MediaQuery.of(context).size.width * .90,
child: TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
contentPadding: const EdgeInsets.only(
top: 2, bottom: 2, left: 8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
),
hintText: "Password",
),
),
),
),
Align(
alignment: Alignment.bottomRight,
child: Container(
margin: EdgeInsets.only(
top: 1, left: 10, right: 10),
child: FlatButton(
onPressed: () {},
child: Text("Forgot Password?",
style: TextStyle(
fontFamily: 'Roboto-Medium',
fontSize: 14.0,
letterSpacing: 1.25,
color:
Color.fromRGBO(75, 56, 137, 80))),
)),
),
Container(
margin:
EdgeInsets.only(top: 1, left: 10, right: 10),
child: SizedBox(
width: MediaQuery.of(context).size.width * .90,
child: RaisedButton(
color: Color.fromRGBO(75, 56, 137, 80),
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius:
new BorderRadius.circular(18.0),
side: BorderSide(
color:
Color.fromRGBO(75, 56, 137, 80))),
child: Text(
"LOGIN",
style: Theme.of(context).textTheme.button,
),
onPressed: () {
if (_formKey.currentState.validate()) {
// If the form is valid, display a Snackbar.
Scaffold.of(context).showSnackBar(
SnackBar(
content:
Text('Processing Data')));
}
},
),
))
],
),
),
Container(
margin: EdgeInsets.only(top: 1, left: 10, right: 10),
child: FlatButton(
onPressed: () {},
child: RichText(
text: TextSpan(children: <TextSpan>[
TextSpan(
text: "Not a member yet? ",
style: TextStyle(fontFamily: 'Roboto-Regular', fontSize: 14.0, letterSpacing: 0.25, color:Color.fromRGBO(75, 56, 137, 80 )),
),
TextSpan(
text: "Create an Account",
style: TextStyle(decoration: TextDecoration.underline, fontFamily: 'Roboto-Regular', fontSize: 14.0, letterSpacing: 0.25, color:Color.fromRGBO(75, 56, 137, 80 ),
),)
]),
),
)),
],
),
),
),
],
)
//child: Image.asset("assets/images/login_image.png"),
);
}
Widget _buildForm() {
return Form(
key: _formKey,
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
flex: 1,
child: Container(
child: ImageIcon(
AssetImage("assets/images/email_24px.png"),
color: Colors.white,
),
margin: EdgeInsets.only(right: 5, bottom: 30)),
),
Flexible(
flex: 7,
child: SizedBox(
height: 80,
child: TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
contentPadding:
const EdgeInsets.only(top: 2, bottom: 2, left: 8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
),
hintText: "Email",
),
),
))
],
),
Container(
margin: EdgeInsets.only(top: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
flex: 1,
child: Container(
child: ImageIcon(
AssetImage("assets/images/lock_24px.png"),
color: Colors.white,
),
margin: EdgeInsets.only(right: 5, bottom: 30),
),
),
Flexible(
flex: 7,
child: SizedBox(
height: 80,
child: TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
contentPadding:
const EdgeInsets.only(top: 2, bottom: 2, left: 8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
),
hintText: "Password",
),
),
))
],
),
),
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
FlatButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
child: Text(
"Forgot Password?",
style: Theme.of(context).textTheme.body1,
),
onPressed: () {},
),
],
),
),
Container(
margin: EdgeInsets.only(top: 40, left: 25, right: 10, bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
child: SizedBox(
width: double.infinity,
height: 45,
child: RaisedButton(
color: Color.fromRGBO(0, 72, 128, 100),
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(18.0),
side:
BorderSide(color: Color.fromRGBO(0, 72, 128, 100))),
child: Text(
"LOGIN",
style: Theme.of(context).textTheme.button,
),
onPressed: () {
if (_formKey.currentState.validate()) {
// If the form is valid, display a Snackbar.
Scaffold.of(context).showSnackBar(
SnackBar(content: Text('Processing Data')));
}
},
),
))
],
),
)
],
),
);
}
#override
void initState() {
// TODO: implement initState
super.initState();
}
}
My view is as follows
when the keyboard is open, the user must close it to access the login button. This is because this cannot be scrolled. I tried adding SingleScrollView and ListView below the main image and wrap the rest with it, but that didnt work. It only made the content disappear.
How can i make sure the fORM section is scrollable?

You can wrap your whole widget with SingleChildScrollView and then ConstrainedBox as follows:
Scaffold(
body: SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height),
child: Container(
child: yourWidget()
You can see the related answer here: https://stackoverflow.com/a/59783374/12709039