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)),
),
],
),
),
);
Related
Basically I'm new to Flutter and trying to make a design like this -
So I Tried Stack for this but couldn't make it perfect.
Here is my code and image
Stack(
children: [
Positioned(
child: Container(
height: 150,
width: 150,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.yellow,
),
),
),
Positioned(
child: Container(
height: 250,
width: 250,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.red,
),
),
top: 10,
left: 5,
right: 5,
),
],),
You will need to give proper positione to each and every Positioned widget.
This code will provide you output which you expact.
You can checkout interactive code here.
Stack(
children: [
Positioned(
left: 125,
top: 50,
child: Container(
height: 250,
width: 250,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.black,
),
),
),
Positioned(
left: 100,
top: 60,
child: Container(
height: 300,
width: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.red,
),
),
),
Positioned(
left: 75,
top: 75,
child: Container(
height: 350,
width: 350,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.yellow,
),
),
),
],
)
Please update your code with the below code. Here, I have fix the height only as device wise width could be changed. I have used Align widget to position the widget to bottom.
Stack(
children: [
Align(
alignment: Alignment.bottomCenter,
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 90),
height: 160,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20)),
color: Colors.greenAccent,
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 50),
height: 140,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(15), topRight: Radius.circular(15)),
color: Colors.orange,
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 0),
height: 120,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10)),
color: Colors.limeAccent,
boxShadow: [
BoxShadow(
color: Colors.yellow,
offset: Offset(0.0, 1.0), //(x,y)
blurRadius: 5.0,
),
],
),
),
),
],)
It will look like this,
Rather then achieve it with Stack widget you can try this with Column widget like below
Column(
children: [
Container(
height: 20,
width: MediaQuery.of(context).size.width - 150,
decoration: BoxDecoration(/*as-per-your-requirement*/),
),
Container(
height: 20,
width: MediaQuery.of(context).size.width - 100,
decoration: BoxDecoration(/*as-per-your-requirement*/),
),
Container(
///this will be your main layout that user can completely see
width: MediaQuery.of(context).size.width - 50,
decoration: BoxDecoration(/*as-per-your-requirement*/),
child: /*as-per-your-requirement*/,
),
],
)
Stack(
children: [
Positioned(
top: -52.h,
left: -22.w,
child: Text(
"$position",
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 200.sp,
color: Color(0x2007B4CF)),
)),
Positioned(
child: SvgPicture.asset(Res.ic_plan_lock),
top: 20.h,
right: 20.w,
),
Positioned(
top: 46.h,
left: 13.w,
right: 13.w,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SvgPicture.asset(Res.ic_plan_secured),
SizedBox(
height: 10.h,
),
Text(
offer.offerName,
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 14.sp,
color: ColorUtil.of(context).primaryDark),
),
SizedBox(
height: 12.h,
),
Text(
offer.offerText,
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 14.sp,
color: Colors.black),
),
],
),
),
Positioned(
bottom: 20.h,
left: 20.h,
right: 20.h,
child: GestureDetector(
behavior: getDefaultGestureDetectorBehaviour(),
onTap: () {
onCtaClicked();
},
child: Container(
height: 31.h,
width: 159.w,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Color(0xFF2D2D3D),
borderRadius: BorderRadius.circular(10.h)),
child: Text(
offer.route,
style: TextStyle(
color: ColorUtil.of(context).colorPrimaryLight,
fontSize: 14.sp,
fontWeight: FontWeight.w500),
),
),
))
],
),
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 ...
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
Target: respect variant screens size.
Problem: Screen's UI does not display well on different devices and producing UI's error
For example: on the iPhone 13 emulator, everything looks as it should, but when you use a smartphone with a screen resolution of 1280x768, everything breaks down
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'auth.dart';
void main() {
runApp(const Auth());
}
class Main extends StatelessWidget {
const Main({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.green,
),
home: const MainPage(),
);
}
}
class MainPage extends StatefulWidget {
const MainPage({Key? key}) : super(key: key);
#override
State<MainPage> createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
toolbarHeight: 0,
),
backgroundColor: const Color.fromARGB(255, 247, 255, 247),
body: SafeArea(
bottom: false,
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
decoration: const BoxDecoration(
image: DecorationImage(
alignment: Alignment.bottomCenter,
image: AssetImage('assets/images/spikelets.png'),
fit: BoxFit.fitWidth,
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Stack(
children: [
Container(
alignment: Alignment.topLeft,
margin: EdgeInsets.only(top: 35, left: 49),
child: Text(
'Добро',
style: TextStyle(
fontFamily: 'GoodVibesCyr',
fontSize: 92,
color: Colors.green,
),
)),
Container(
alignment: Alignment.topLeft,
margin: EdgeInsets.only(top: 100, left: 35),
child: Text(
'пожаловать!',
style: TextStyle(
fontFamily: 'TTCommons',
fontSize: 54,
color: Colors.green,
fontWeight: FontWeight.bold,
),
)),
],
),
Container(
alignment: Alignment.topLeft,
margin: EdgeInsets.only(top: 20, left: 25),
child: Text(
'Мобильный заказ',
style: TextStyle(
fontFamily: 'TTCommons',
fontWeight: FontWeight.bold,
fontSize: 36,
color: Colors.black,
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 150,
width: 150,
margin: EdgeInsets.only(top: 15),
decoration: const BoxDecoration(
image: DecorationImage(
alignment: Alignment.bottomCenter,
image: AssetImage(
'assets/images/backgroundMainButtons.png'),
fit: BoxFit.fitWidth,
),
boxShadow: [
BoxShadow(
color: Color.fromARGB(41, 0, 0, 0),
blurRadius: 6,
offset: Offset(0, 3), // changes position of shadow
),
],
borderRadius: BorderRadius.all(Radius.circular(20)),
),
),
Container(
height: 150,
width: 150,
margin: EdgeInsets.only(left: 25, top: 15),
decoration: const BoxDecoration(
image: DecorationImage(
alignment: Alignment.bottomCenter,
image: AssetImage(
'assets/images/backgroundMainButtons.png'),
fit: BoxFit.fitWidth,
),
boxShadow: [
BoxShadow(
color: Color.fromARGB(41, 0, 0, 0),
blurRadius: 6,
offset: Offset(0, 3), // changes position of shadow
),
],
borderRadius: BorderRadius.all(Radius.circular(20)),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 150,
width: 150,
margin: EdgeInsets.only(top: 15),
decoration: const BoxDecoration(
image: DecorationImage(
alignment: Alignment.bottomCenter,
image: AssetImage(
'assets/images/backgroundMainButtons.png'),
fit: BoxFit.fitWidth,
),
boxShadow: [
BoxShadow(
color: Color.fromARGB(41, 0, 0, 0),
blurRadius: 6,
offset: Offset(0, 3), // changes position of shadow
),
],
borderRadius: BorderRadius.all(Radius.circular(20)),
),
),
Container(
height: 150,
width: 150,
margin: EdgeInsets.only(left: 25, top: 15),
decoration: const BoxDecoration(
image: DecorationImage(
alignment: Alignment.bottomCenter,
image: AssetImage(
'assets/images/backgroundMainButtons.png'),
fit: BoxFit.fitWidth,
),
boxShadow: [
BoxShadow(
color: Color.fromARGB(41, 0, 0, 0),
blurRadius: 6,
offset: Offset(0, 3), // changes position of shadow
),
],
borderRadius: BorderRadius.all(Radius.circular(20)),
),
),
],
),
Container(
margin: EdgeInsets.only(top: 15, right: 15),
width: 325,
height: 60,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Color.fromARGB(255, 67, 152, 71),
blurRadius: 0,
offset: Offset(0, 10), // changes position of shadow
),
],
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: SizedBox(
width: 325,
height: 60,
child: ElevatedButton(
onPressed: () {},
child: Text(
'Товары недели',
style: TextStyle(
fontFamily: 'TTCommons',
fontSize: 32,
fontWeight: FontWeight.bold),
),
style: ElevatedButton.styleFrom(
alignment: Alignment.center,
shadowColor: Color.fromARGB(0, 0, 0, 0),
padding: EdgeInsets.all(15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20), // <-- Radius
),
),
),
),
),
],
),
),
),
);
}
}
The provided screen-shots declares more details:
Many possible solutions:
Wrap your Column widget by SingleChildScrollView
Replace Column with Scrollable Widget
Use "Wrap" Widget instead of "Column" Widget
SafeArea( /// controlls the reset of space
bottom: false,
child: Container( /// define the child height witch breaks the SafeArea physics
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
decoration: const BoxDecoration(
image: DecorationImage(
alignment: Alignment.bottomCenter,
image: AssetImage('assets/images/spikelets.png'),
fit: BoxFit.fitWidth,
),
),
child: Column( /// the child you gonna to update with above possabilities
--Update--
As you mentioned in comments about scaling your widgets, there are two ways as I know
first, you can use the flutter_screenutil
secondly, you can create your own sizing service like mine
import 'package:flutter/widgets.dart';
import 'package:get/get.dart';
class SizeConfig {
/// create singleton instance
SizeConfig._internal();
static final SizeConfig _instance = SizeConfig._internal();
factory SizeConfig() => _instance;
double screenWidth = Get.context.orientation == Orientation.portrait ? Get.mediaQuery.size.width : Get.mediaQuery.size.height;
double screenHeight = Get.context.orientation == Orientation.portrait ? Get.mediaQuery.size.height : Get.mediaQuery.size.width;
double infinityHeight() => double.infinity;
double infinityWidth() => double.infinity;
double blockSizeHorizontal() => screenWidth / 100;
double blockSizeVertical() => screenHeight / 100;
double _safeAreaHorizontal() => Get.mediaQuery.padding.left + Get.mediaQuery.padding.right;
double _safeAreaVertical() => Get.mediaQuery.padding.top + Get.mediaQuery.padding.bottom;
double safeBlockHorizontal() => (screenWidth - (Get.context.orientation == Orientation.portrait ? _safeAreaHorizontal() : _safeAreaVertical())) / 100;
double safeBlockVertical() => (screenHeight - (Get.context.orientation == Orientation.portrait ? _safeAreaVertical() : _safeAreaHorizontal())) / 100;
double fontSize50() => safeBlockHorizontal() * 5.0;
double fontSize51() => safeBlockHorizontal() * 5.1;
double fontSize52() => safeBlockHorizontal() * 5.2;
double fontSize53() => safeBlockHorizontal() * 5.3;
double fontSize54() => safeBlockHorizontal() * 5.4;
double fontSize55() => safeBlockHorizontal() * 5.5;
double fontSize56() => safeBlockHorizontal() * 5.6;
double fontSize57() => safeBlockHorizontal() * 5.7;
double fontSize58() => safeBlockHorizontal() * 5.8;
double fontSize59() => safeBlockHorizontal() * 5.9;
}
I use this SizeConfig() service with GetX, and using it as
width: SizeConfig().safeBlockHorizontal() * 10, // 10% from screen width
height: SizeConfig().safeBlockVertical() * 10 // 10% from screen height
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()],
)
],
),),
);
} ````
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(),
);
}
}