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()],
)
],
),),
);
} ````
Related
I currently have the problem that I can't figure out how to update the button state so that when I scroll on the second slide the right button is highlighted with the grey background. (I disabled scrolling for as long as I don't have a solution.)
CarouselController buttonCarouselController = CarouselController();
bool pressAttention = false;
bool pressAttention1 = true;
int _currentIndex = 1;
Padding(
padding: const EdgeInsets.fromLTRB(10, 20, 10, 0),
child: CarouselSlider(
carouselController: buttonCarouselController,
options: CarouselOptions(
enableInfiniteScroll: false,
initialPage: 0,
height: MediaQuery.of(context).size.height * 0.5,
enlargeCenterPage: true,
enlargeStrategy: CenterPageEnlargeStrategy.height,
viewportFraction: 1,
scrollPhysics: const NeverScrollableScrollPhysics(),
),
items: [
Container(
width: double.infinity,
height: double.infinity,
margin: const EdgeInsets.all(5.0),
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 1,
blurRadius: 2,
offset: const Offset(0, 2),
),
],
borderRadius: const BorderRadius.all(Radius.circular(20)),
color: Colors.white,
),
child: Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
child: SingleChildScrollView(
child: Column(
children: [
Container(
width: 200,
height: 200,
child: Image.asset(
'assets/existenz.png',
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 0, 10),
child: AutoSizeText(
'Existenz',
maxLines: 2,
minFontSize: 20,
style: GoogleFonts.rubik(
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
),
PhysicalShape(
clipper: ShapeBorderClipper(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0)
)
),
color: const Color.fromRGBO(160, 20, 35, 1),
child: Container(
height: 50,
width: 200,
child: TextButton(
onPressed: () {
print('Button pressed ...');
},
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
child: AutoSizeText(
'Beginnen',
maxLines: 3,
minFontSize: 17,
style: GoogleFonts.rubik(
color: Colors.white,
),
),
),
)
),
),
]
)
),
),
),
Container(
width: double.infinity,
height: double.infinity,
margin: const EdgeInsets.all(5.0),
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 1,
blurRadius: 2,
offset: const Offset(0, 2),
),
],
borderRadius: const BorderRadius.all(Radius.circular(20)),
color: Colors.white,
),
child: Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
child: SingleChildScrollView(
child: Column(
children: [
Container(
width: 200,
height: 200,
child: Image.asset(
'assets/einfach.png',
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 0, 10),
child: AutoSizeText(
'Einfach',
maxLines: 2,
minFontSize: 20,
style: GoogleFonts.rubik(
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
),
PhysicalShape(
clipper: ShapeBorderClipper(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0)
)
),
color: const Color.fromRGBO(160, 20, 35, 1),
child: Container(
height: 50,
width: 200,
child: TextButton(
onPressed: () {
print('Button pressed ...');
},
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
child: AutoSizeText(
'Beginnen',
maxLines: 3,
minFontSize: 17,
style: GoogleFonts.rubik(
color: Colors.white,
),
),
),
)
),
),
]
)
),
),
),
]
),
),
const Divider(
height: 10,
thickness: 1,
color: Color.fromRGBO(250, 250, 250, 1)
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
PhysicalShape(
clipper: ShapeBorderClipper(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50.0)
)
),
color: pressAttention1 ? const Color.fromRGBO(230, 230, 230, 1) : const Color.fromRGBO(250, 250, 250, 1),
child: Container(
height: 30,
width: 75,
child: TextButton(
onPressed: () => [buttonCarouselController.previousPage(
duration: const Duration(milliseconds: 300), curve: Curves.linear),setState(() => pressAttention1 = !pressAttention1), pressAttention1=true, pressAttention=false, print(_currentIndex)],
child: Text(
"Existenz",
style: GoogleFonts.rubik(
color: Colors.black,
fontSize: 14,
)
)
)
),
),
PhysicalShape(
clipper: ShapeBorderClipper(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50.0)
)
),
color: pressAttention ? const Color.fromRGBO(230, 230, 230, 1) : const Color.fromRGBO(250, 250, 250, 1),
child: Container(
height: 30,
width: 75,
child: TextButton(
onPressed: () => [buttonCarouselController.nextPage(
duration: const Duration(milliseconds: 300), curve: Curves.linear),setState(() => pressAttention = !pressAttention), pressAttention=true, pressAttention1=false, print(_currentIndex)],
child: Text(
"Einfach",
style: GoogleFonts.rubik(
color: Colors.black,
fontSize: 14,
)
)
)
),
),
Any help would be greatly appreciated, thanks in advance.
if you want to save button state you should observe any widget state with inherited widget or state management package ex: provider, riverpod or bloc ...
I want to have a draggable bottom sheet for which I have written the code. But the problem is bottom sheet is shown properly but the body has a container and that is not shown. Can somebody help me with the same. If I run the code without bottomsheet it runs properly. I am unable to figure out where is the problem
import 'package:flutter/material.dart';
class HomePage1 extends StatelessWidget {
const HomePage1({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
double height = MediaQuery.of(context).size.height;
return Scaffold(
backgroundColor: const Color(0xFF1E2129),
body: Stack(
children: [
Positioned.fill(
top: 150,
child: Container(
height: height * .4,
width: double.maxFinite,
color: const Color(0xFF1E2129),
child: Row(
children: [
const SizedBox(width: 24),
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
/* image: DecorationImage(
image: AssetImage('images/p1.png'),
),*/
border: Border.all(
color: const Color(0xFF3B414F), width: 1.0),
borderRadius: const BorderRadius.all(Radius.circular(12)),
),
child: const Icon(
Icons.message,
color: Color(0xFFBBFFF3),
size: 15,
),
),
const SizedBox(
width: 12,
),
const Text(
'Somnio Software',
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.bold,
),
)
],
),
),
),
],
),
bottomSheet: DraggableScrollableSheet(
builder: (BuildContext context, ScrollController scrollController) {
return ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 32),
color: Colors.blue,
child: Column(
children: [
Text(
'DIRECT MESSAGES',
style: TextStyle(
color: Colors.grey.shade800,
fontWeight: FontWeight.bold,
fontSize: 10),
),
],
),
),
);
/*Container(
color: Colors.green,
child: ListView.builder(
controller: scrollController,
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return Container(
padding: EdgeInsets.all(5),
child: Card(
child: ListTile(
title: Text('Item $index'),
)),
);
}),
);*/
},
initialChildSize: .6,
),
);
}
}
DraggableScrollableSheet is always display in bottom no need to attached with bottom sheet,
Just drag into stack (as mentioned below)
Stack(
alignment: AlignmentDirectional.topStart,
children: [
Positioned.fill(
top: 150,
child: Container(
height: height * .4,
width: double.maxFinite,
color: const Color(0xFF1E2129),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(width: 24),
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
/* image: DecorationImage(
image: AssetImage('images/p1.png'),
),*/
color: Color(0xFF1E2129),
border: Border.all(
color: const Color(0xFF3B414F), width: 1.0),
borderRadius: const BorderRadius.all(Radius.circular(12)),
),
child: const Icon(
Icons.message,
color: Color(0xFFBBFFF3),
size: 15,
),
),
const SizedBox(
width: 12,
),
const Text(
'Somnio Software',
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.bold,
),
)
],
),
),
),
DraggableScrollableSheet(
builder: (BuildContext context, ScrollController scrollController) {
return ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 32),
color: Colors.blue,
child: Column(
children: [
Text(
'DIRECT MESSAGES',
style: TextStyle(
color: Colors.grey.shade800,
fontWeight: FontWeight.bold,
fontSize: 10),
),
],
),
),
);
/*Container(
color: Colors.green,
child: ListView.builder(
controller: scrollController,
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return Container(
padding: EdgeInsets.all(5),
child: Card(
child: ListTile(
title: Text('Item $index'),
)),
);
}),
);*/
},
initialChildSize: .6,
)
],
),
See the Output...
you should try a function called bottom Model sheet and make it use in your project..
https://api.flutter.dev/flutter/material/showModalBottomSheet.html
you can find it on flutter api
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)),
),
],
),
),
);
I need to make this favourite icon to the right of the container. I can use padding but is it ok? I mean is it going to work with all devices. Is there any solid way to align these 3 containers? I made a list view because I am adding more stuff like this one. can you guys help me with this?
Here is the image
Here is my code
class _OrdersState extends State<Orders> {
#override
Widget build(BuildContext context) {
return Material(
child: SafeArea(
child: Stack(
children: [
Background(),
Positioned(
top: 10,
left: 5,
child: SizedBox(
// width: 10,
// height: 10,
child: Container(
color: Colors.transparent,
child: IconButton(
icon: Icon(Icons.arrow_back),
color: Colors.white,
//go back
onPressed: () => Navigator.of(context).pop(),
),
),
),
),
Positioned(
top: 90,
left: 22,
right: 22,
child: SizedBox(
width: 350,
height: 900,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 3,
blurRadius: 7,
),
],
),
child: Row(
children: [
Container(
color: Colors.blue,
margin: EdgeInsets.all(2),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'3:32',
style: TextStyle(fontSize: 20),
),
),
),
Container(
color: Colors.red,
child: Text(
'Order 1',
style: TextStyle(fontSize: 20),
),
),
Container(
color: Colors.amber,
child: Icon(Icons.favorite),
)
],
),
),
),
),
],
),
),
);
}
}
In the Row try to use and Expanded widget like this
Row(
children: [
Expanded(
child: Row(
children: [
Container(
color: Colors.blue,
margin: EdgeInsets.all(2),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'3:32',
style: TextStyle(fontSize: 20),
),
),
),
Container(
color: Colors.red,
child: Text(
'Order 1',
style: TextStyle(fontSize: 20),
),
),
],
),
),
Container(
color: Colors.amber,
child: Icon(Icons.favorite),
)
],
)
Please, I am new to flutter. (I want To simplify the first code using the Listview.builder) i am trying to implement a Listview.builder for an image picker. I am using a youtube tutorial. Please, how do i map the 'File' class to the images. I have tried using ...Map<String, File>... but that does not work. I have posted the code below. Here is what i want to Simplify:
import 'package:image_picker/image_picker.dart';
import 'dart:io';
class ImageGallery extends StatefulWidget {
#override
_ImageGalleryState createState() => _ImageGalleryState();
}
class _ImageGalleryState extends State<ImageGallery> {
File _image1;
File _image2;
File _image3;
File _image4;
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(10),
height: MediaQuery.of(context).size.height / 5,
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
flex: 1,
child: Container(
width: MediaQuery.of(context).size.width / 8,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.orange),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5),
bottomLeft: Radius.circular(5)),
boxShadow: [
BoxShadow(
offset: Offset(0, 15),
blurRadius: 27,
color: Colors.black12, // Black color with 12% opacity
)]),
child: Center(child: Text('Images')),
),
),
Expanded(
flex: 5,
child: Container(
decoration: BoxDecoration(
// color: Colors.white,
border: Border.all(color: Colors.orange),
borderRadius: BorderRadius.only(
topRight: Radius.circular(10),
bottomRight: Radius.circular(10)),
boxShadow: [BoxShadow(
offset: Offset(0, 15),
blurRadius: 27,
color: Colors.black12, // Black color with 12% opacity
)]),
child: Row(
children: <Widget>[
OutlineButton(
onPressed: () {
_selectImage(
ImagePicker.pickImage(source:ImageSource.gallery ), 1
);
},
color: Colors.white,
borderSide: BorderSide(
color: Colors.orange.withOpacity(0.1),
width: 2.5,
),
child: _displayChild1()
),
OutlineButton(
onPressed: () {
_selectImage(
ImagePicker.pickImage(source:ImageSource.gallery ), 2
);
},
color: Colors.white,
borderSide: BorderSide(
color: Colors.orange.withOpacity(0.1),
width: 2.5,
),
child: _displayChild2()
),
OutlineButton(
onPressed: () {
_selectImage(
ImagePicker.pickImage(source:ImageSource.gallery ), 3
);
},
color: Colors.white,
borderSide: BorderSide(
color: Colors.orange.withOpacity(0.1),
width: 2.5,
),
child: _displayChild3()
),
OutlineButton(
onPressed: () {
_selectImage(
ImagePicker.pickImage(source:ImageSource.gallery ), 4
);
},
color: Colors.white,
borderSide: BorderSide(
color: Colors.orange.withOpacity(0.1),
width: 2.5,
),
child: _displayChild4()
),
],
),
),
),
],
),
);
}
void _selectImage(Future<File> pickImage, int imageNumber) async {
File tempImg = await pickImage;
switch (imageNumber) {
case 1:
setState(() => _image1 = tempImg);
break;
case 2:
setState(() => _image2 = tempImg);
break;
case 3:
setState(() => _image3 = tempImg);
break;
case 4:
setState(() => _image4 = tempImg);
break;
}
}
Widget _displayChild1() {
if (_image1 == null) {
return Padding(
padding: const EdgeInsets.fromLTRB(14, 40, 14, 40),
child: Image.asset(
"assets/icons/plus.png",
height: 30,
width: 30,
),
);
} else {
return Image.file(
_image1,
fit: BoxFit.fill,
width: double.infinity,
);
}
}
Widget _displayChild2() {
if (_image2 == null) {
return Padding(
padding: const EdgeInsets.fromLTRB(14, 40, 14, 40),
child: Image.asset(
"assets/icons/plus.png",
height: 30,
width: 30,
),
);
} else {
return Image.file(
_image2,
fit: BoxFit.fill,
width: double.infinity,
);
}
}
Widget _displayChild3() {
if (_image3 == null) {
return Padding(
padding: const EdgeInsets.fromLTRB(14, 40, 14, 40),
child: Image.asset(
"assets/icons/plus.png",
height: 30,
width: 30,
),
);
} else {
return Image.file(
_image3,
fit: BoxFit.fill,
width: double.infinity,
);
}
}
Widget _displayChild4() {
if (_image4 == null) {
return Padding(
padding: const EdgeInsets.fromLTRB(14, 40, 14, 40),
child: Image.asset(
"assets/icons/plus.png",
height: 30,
width: 30,
),
);
} else {
return Image.file(
_image4,
fit: BoxFit.fill,
width: double.infinity,
);
}
}
}
to use the Listview.builder like this -
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';
class ImageAdd extends StatefulWidget {
#override
_ImageAddState createState() => _ImageAddState();
}
class _ImageAddState extends State<ImageAdd> {
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(10),
height: MediaQuery.of(context).size.height / 5,
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
flex: 1,
child: Container(
width: MediaQuery.of(context).size.width / 8,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.orange),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5),
bottomLeft: Radius.circular(5)),
boxShadow: [BoxShadow(
offset: Offset(0, 15),
blurRadius: 27,
color: Colors.black12, // Black color with 12% opacity
)]),
child: Center(child: Text('Images')),
),
),
Expanded(
flex: 5,
child: Container(
decoration: BoxDecoration(
// color: Colors.white,
border: Border.all(color: Colors.orange),
borderRadius: BorderRadius.only(
topRight: Radius.circular(10),
bottomRight: Radius.circular(10)),
boxShadow: [BoxShadow(
offset: Offset(0, 15),
blurRadius: 27,
color: Colors.black12, // Black color with 12% opacity
)]),
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 4,
itemBuilder: (context, index) => OutlineButton(
onPressed: () {},
color: Colors.white,
borderSide: BorderSide(
color: Colors.orange.withOpacity(0.1),
width: 2.5,
),
child: Padding(
padding: const EdgeInsets.fromLTRB(14, 40, 14, 40),
child: Image.asset(
"assets/icons/plus.png",
height: 30,
width: 30,
),
),
),
),
),
),
],
),
);
}
}
I do not know how to use the Listview.builder to achieve the first code or rather to simplify the first code. Thank you.
You can copy paste run full code below
You can use Map<int, File> and put File to related index
code snippet
Map<int, File> files = {0: null, 1: null, 2: null, 3: null};
ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: files.length,
itemBuilder: (context, index) => OutlineButton(
onPressed: () async {
files[index] = await ImagePicker.pickImage(
source: ImageSource.gallery);
setState(() {});
},
...
child: files[index] == null
? Padding(
...
: Image.file(
files[index],
fit: BoxFit.fill,
working demo
full code
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';
Map<int, File> files = {0: null, 1: null, 2: null, 3: null};
class ImageAdd extends StatefulWidget {
#override
_ImageAddState createState() => _ImageAddState();
}
class _ImageAddState extends State<ImageAdd> {
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(10),
height: MediaQuery.of(context).size.height / 5,
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
flex: 1,
child: Container(
width: MediaQuery.of(context).size.width / 8,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.orange),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5),
bottomLeft: Radius.circular(5)),
boxShadow: [
BoxShadow(
offset: Offset(0, 15),
blurRadius: 27,
color: Colors.black12, // Black color with 12% opacity
)
]),
child: Center(child: Text('Images')),
),
),
Expanded(
flex: 5,
child: Container(
decoration: BoxDecoration(
// color: Colors.white,
border: Border.all(color: Colors.orange),
borderRadius: BorderRadius.only(
topRight: Radius.circular(10),
bottomRight: Radius.circular(10)),
boxShadow: [
BoxShadow(
offset: Offset(0, 15),
blurRadius: 27,
color: Colors.black12, // Black color with 12% opacity
)
]),
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: files.length,
itemBuilder: (context, index) => OutlineButton(
onPressed: () async {
files[index] = await ImagePicker.pickImage(
source: ImageSource.gallery);
setState(() {});
},
color: Colors.white,
borderSide: BorderSide(
color: Colors.orange.withOpacity(0.1),
width: 2.5,
),
child: files[index] == null
? Padding(
padding: const EdgeInsets.fromLTRB(14, 40, 14, 40),
child: Image.network(
"https://picsum.photos/250?image=9",
height: 30,
width: 30,
),
)
: Image.file(
files[index],
fit: BoxFit.fill,
//width: double.infinity,
)),
),
),
),
],
),
);
}
}
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: ImageAdd(),
);
}
}