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 ...
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 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 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()],
)
],
),),
);
} ````
Guys i have a container with a column inside it and i am trying to make two buttons inside that column take up the width of the container but i keep failing at it. I tried wrapping the buttons in a row, i tried wrapping them in a sizedbox but i cant seem to figure it out.
The text buttons i am talking about are in the middle code section and i added a comment next to them
class ProfilePicPreference extends StatelessWidget {
const ProfilePicPreference({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
return Scaffold(
backgroundColor: Colors.transparent,
body: SizedBox(
width: width,
height: height,
child: Stack(
children: [
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomLeft,
colors: [Color(0xFF1F1F1F), Color(0xFF1F1F1F)],
),
image: DecorationImage(
image: AssetImage("lib/assets/images/topbig.png"),
alignment: Alignment.topCenter,
),
),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('lib/assets/images/toptop.png'),
alignment: Alignment.topCenter,
),
),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('lib/assets/images/top.png'),
alignment: Alignment.topCenter,
),
),
),
Positioned(
top: 70.0,
left: 30.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: [
InkWell(
onTap: () {},
child: Container(
decoration: BoxDecoration(),
child: ClipRRect(
// borderRadius: BorderRadius.circular(10.0),
child: Image.asset('lib/assets/images/bluetick.png',
width: 40.0, height: 40.0),
),
),
),
Text(
"━━━━━",
style: TextStyle(color: kcPrimaryColor),
),
InkWell(
onTap: () {},
child: Container(
decoration: BoxDecoration(),
child: ClipRRect(
// borderRadius: BorderRadius.circular(10.0),
child: Image.asset('lib/assets/images/bluetick.png',
width: 40.0, height: 40.0),
),
),
),
Text(
"━━━━━",
style: TextStyle(color: kcMediumGreyColor),
),
InkWell(
onTap: () {},
child: Container(
decoration: BoxDecoration(),
child: ClipRRect(
// borderRadius: BorderRadius.circular(10.0),
child: Image.asset('lib/assets/images/bluetick.png',
width: 40.0, height: 40.0),
),
),
),
Text(
"━━━━━",
style: TextStyle(color: kcMediumGreyColor),
),
InkWell(
onTap: () {},
child: Container(
decoration: BoxDecoration(),
child: ClipRRect(
// borderRadius: BorderRadius.circular(10.0),
child: Image.asset('lib/assets/images/purplewatch.png',
width: 40.0, height: 40.0),
),
),
),
],
),
),
Positioned(
top: 130.0,
left: 25.0,
child: Row(
children: [
Text(
"Profile",
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat',
),
),
SizedBox(
width: 40,
),
Text(
"Relationship",
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat',
),
),
SizedBox(
width: 40,
),
Text(
"Music",
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat',
),
),
SizedBox(
width: 40,
),
Text(
"Profile Pic",
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat',
),
)
],
)),
Positioned(
top: 200,
right: 100,
child: Align(
alignment: Alignment.center,
child: Text(
'Upload your Profile Pic',
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat',
),
),
),
),
Positioned(
top: 350,
left: 35,
child: SizedBox(
width: width / 1.2,
height: height / 3,
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Container(
color: Colors.grey[850],
child: Column(
children: [
SizedBox(
height: 90,
),
SizedBox(
height: 10,
),
TextButton(. //other button i want to increase width
style: ButtonStyle(
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
),
backgroundColor: MaterialStateProperty.all<Color>(
kcPrimaryColor),
foregroundColor: MaterialStateProperty.all<Color>(
Colors.white)),
onPressed: () {},
child: Text("Upload Picture"),
),
TextButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => MusicPreferences()),
);
},
child: Text("I will do it later"), //button i want to increase width of
style: ButtonStyle(
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
),
backgroundColor: MaterialStateProperty.all<Color>(
Colors.transparent),
foregroundColor: MaterialStateProperty.all<Color>(
kcPrimaryColor)),
),
],
),
),
),
),
),
Positioned(
top: 290,
left: 140,
child: SizedBox(
width: 150,
height: 150,
child: ClipRRect(
borderRadius: BorderRadius.circular(100.0),
child: Container(
color: Colors.grey[850],
),
)),
),
Positioned(
top: 280,
left: 165,
child: SizedBox(
width: 100,
height: 150,
child: CircleAvatar(
backgroundImage:
AssetImage("lib/assets/images/randomface.jpg"),
),
),
),
Positioned(
bottom: 50,
child: Row(
children: [
SizedBox(
height: 60,
width: width / 2,
child: TextButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => MusicPreferences()),
);
},
child: Text("Back"),
style: ButtonStyle(
shape:
MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
),
backgroundColor: MaterialStateProperty.all<Color>(
Colors.transparent),
foregroundColor:
MaterialStateProperty.all<Color>(kcPrimaryColor)),
),
),
SizedBox(
height: 60,
width: width / 2,
child: TextButton(
style: ButtonStyle(
shape:
MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
),
backgroundColor:
MaterialStateProperty.all<Color>(kcPrimaryColor),
foregroundColor:
MaterialStateProperty.all<Color>(Colors.white)),
onPressed: () {},
child: Text("Done"),
),
),
],
),
),
],
),
),
);
}
}
Good Evening fellow Developers,
I am trying to find a way for my parent container to have its height set to be equal to the child text widget content.
The text (textDes) in the Text widget is changing. It can be short or long and for that reason I can not set the height: to a specific number like 1400 because it will look ugly.
Please be so kind and help me, trying for hours.
import 'package:angelbay_bungalows/screens/overview.dart';
import 'package:angelbay_bungalows/widgets/drawer.dart';
import 'package:flutter/material.dart';
class Amenities extends StatelessWidget {
final String titleTop;
final String textDes;
final String img;
Amenities(this.titleTop, this.textDes, this.img);
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
#override
Widget build(BuildContext context) {
var screenSize = MediaQuery.of(context).size;
return Scaffold(
key: scaffoldKey,
drawer: AppDrawer(),
body: SingleChildScrollView(
child: Container(
height: 1400,
width: screenSize.width,
child: Stack(
// overflow: Overflow.visible,
children: <Widget>[
Image.asset(
"$img",
height: 400.0,
width: screenSize.width,
fit: BoxFit.cover,
),
Positioned(),
Positioned(),
Positioned(
top: 375.0,
child: Container(
// height: ,
width: screenSize.width,
decoration: BoxDecoration(
color: Color.fromRGBO(216, 216, 216, 1),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
),
),
child: Padding(
padding: const EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
titleTop,
style: TextStyle(
color: Colors.black,
fontSize: 26.0,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 40.0,
),
Text(
'Description',
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w500,
color: Color.fromRGBO(50, 54, 67, 1),
),
),
SizedBox(
height: 20.0,
),
Text(
textDes,
style: TextStyle(
fontSize: 16.0,
color: Color.fromRGBO(117, 117, 117, 1),
),
),
],
),
),
),
),
],
),
)),
);
}
}
Wrap your Text widget inside an Expanded and remove the hardcoded height of 1400
Expanded(
child: Text(
textDes,
style: TextStyle(
fontSize: 16.0,
color: Color.fromRGBO(117, 117, 117, 1),
),
),
),
Hope it helps!!
After long hours, this is what I came up with and works.
import 'package:angelbay_bungalows/screens/overview.dart';
import 'package:angelbay_bungalows/widgets/drawer.dart';
import 'package:flutter/material.dart';
class Amenities extends StatelessWidget {
final String titleTop;
final String textDes;
final String img;
Amenities(this.titleTop, this.textDes, this.img);
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
#override
Widget build(BuildContext context) {
var screenSize = MediaQuery.of(context).size;
return Scaffold(
key: scaffoldKey,
drawer: AppDrawer(),
body: Container(
color: Color.fromRGBO(216, 216, 216, 1),
child: Stack(
// overflow: Overflow.visible,
children: <Widget>[
Image.asset(
"$img",
height: 400,
width: screenSize.width,
fit: BoxFit.cover,
),
Positioned(
top: 50.0,
left: 10.0,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return Overview();
},
),
);
},
child: Icon(
Icons.arrow_back_ios,
color: Colors.white,
size: 30.0,
),
),
),
Positioned(
top: 50.0,
right: 10.0,
child: GestureDetector(
onTap: () => scaffoldKey.currentState.openDrawer(),
child: Icon(
Icons.menu,
color: Colors.white,
size: 30.0,
)),
),
Padding(
padding: const EdgeInsets.only(top: 40),
child: DraggableScrollableSheet(
initialChildSize: 0.5,
minChildSize: 0.5,
maxChildSize: 0.8,
builder: (context, controller) {
return SingleChildScrollView(
controller: controller,
child: Container(
width: screenSize.width,
decoration: BoxDecoration(
color: Color.fromRGBO(216, 216, 216, 1),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
titleTop,
style: TextStyle(
color: Colors.black,
fontSize: 26.0,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 40.0,
),
Text(
'Description',
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w500,
color: Color.fromRGBO(50, 54, 67, 1),
),
),
SizedBox(
height: 20.0,
),
Text(
textDes,
style: TextStyle(
fontSize: 16.0,
color: Color.fromRGBO(117, 117, 117, 1),
),
)
],
),
),
),
);
}),
),
],
),
),
);
}
}