How to Implement Stack Correctly in Flutter? - android

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),
),
),
))
],
),

Related

Don't Show Custom Text If Flutter Isn't Found In The Filtered List

I have a List. I'm trying to pull the items in this list with a filter. I want to show a custom Text if 0 results in filtering. I wrote a code like this:
for (var i = 0; i < Products.length; i++)
if (FilterActive == true) // Filtre: On
if (Products[i].data()["Category"] == FilterID)
Padding(
padding: const EdgeInsets.only(right: 15),
child: GestureDetector(
child: Card(
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
child: Container(
width: MediaQuery.of(context).size.width * 0.37,
decoration: BoxDecoration(
color: Color(0xFF3F3F46),
borderRadius: BorderRadius.circular(10),
),
child: Column(
children: [
SizedBox(height: 15),
ClipRRect(
borderRadius: BorderRadius.circular(15),
child: Image.network(Products[i].data()["Image"], fit: BoxFit.cover, width: 110, height: 110),
),
SizedBox(height: MediaQuery.of(context).size.height * 0.015),
Padding(
padding: const EdgeInsets.only(left: 4, right: 4),
child: Text(Products[i].data()["Name"], overflow: TextOverflow.ellipsis, style: TextStyle(fontSize: 18, fontFamily: "Inter Regular", color: Color(0xFFD4D4D8)), textAlign: TextAlign.center),
),
SizedBox(height: MediaQuery.of(context).size.height * 0.010),
Text("${Products[i].data()["Coin"]} Coin", style: TextStyle(fontSize: 18, fontFamily: "Inter Regular", color: Color(0xFFFACC15), fontWeight: FontWeight.bold), textAlign: TextAlign.center,),
],
),
),
),
),
),
for (var i = 0; i < Products.length; i++)
if (Products[i].data()["Category"] == FilterID)
if (Products[i].data()["Category"] == 0) // I tried this
Text("No result"), // !!!!--------!!!!!
if (FilterActive == false) // Filtre: Off
for (var i = 0; i < Products.length; i++)
Padding(
padding: const EdgeInsets.only(right: 15),
child: GestureDetector(
child: Card(
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
child: Container(
width: MediaQuery.of(context).size.width * 0.37,
decoration: BoxDecoration(
color: Color(0xFF3F3F46),
borderRadius: BorderRadius.circular(10),
),
child: Column(
children: [
SizedBox(height: 15),
ClipRRect(
borderRadius: BorderRadius.circular(15),
child: Image.network(Products[i].data()["Image"], fit: BoxFit.cover, width: 110, height: 110),
),
SizedBox(height: MediaQuery.of(context).size.height * 0.015),
Padding(
padding: const EdgeInsets.only(left: 4, right: 4),
child: Text(Products[i].data()["Name"], overflow: TextOverflow.ellipsis, style: TextStyle(fontSize: 18, fontFamily: "Inter Regular", color: Color(0xFFD4D4D8)), textAlign: TextAlign.center),
),
SizedBox(height: MediaQuery.of(context).size.height * 0.010),
Text("${Products[i].data()["Coin"]} Coin", style: TextStyle(fontSize: 18, fontFamily: "Inter Regular", color: Color(0xFFFACC15), fontWeight: FontWeight.bold), textAlign: TextAlign.center,),
],
),
),
),
),
),
How can I fetch the custom Text if the filtering does not yield any results? I would be glad if you help. Thanks in advance for your help.

Update button state when on specific slide of carousel slider

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 ...

how can make this two circular containers selectable?

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

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

How to increase button width inside a column to take up the full width of the container

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"),
),
),
],
),
),
],
),
),
);
}
}

The Tab-bar View Issues

Tab bar View
The Issues Which is if I try to add tab bar view it show Horizontal viewport was given unbounded height is there any other alternate for tab bar view to fix this issues
GitHub Link : https://github.com/RakulAgn/MyFlutterApp/blob/master/ui/lib/Pages/LandingPage.dart

Hi i checked your code you need to wrap your Scaffold with the DefaultTabController and then move forward to show tabs and tabview. I'm attaching the code for your reference please check.
return DefaultTabController(
length: 3,
child: Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
// child: Center(
child: Column(children: [
Expanded(
flex: 5,
child: Container(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(
width: 15,
),
Row(
children: [
SizedBox(height: 80),
customIconGoBack(context),
Row(
children: [
SizedBox(
width: 230,
),
customIconFav(),
],
)
],
)
],
),
SizedBox(
height: 280,
),
Row(
children: [
SizedBox(
height: 10,
width: 20,
),
Icon(
Icons.location_on_sharp,
color: Colors.white,
size: 25,
),
SizedBox(
width: 2,
),
Text(
"2.4km away",
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 12,
color: Colors.white,
),
),
],
),
SizedBox(
height: 5,
),
Row(
children: [
SizedBox(
height: 5,
width: 20,
),
Container(
child: Text(
'Bondi Beach',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 24,
color: Colors.white,
),
),
),
SizedBox(
width: 110,
),
Container(
height: 30,
margin: EdgeInsets.only(right: 20),
padding: EdgeInsets.only(left: 10),
width: 70,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Colors.black45,
),
child: Row(
children: [
Icon(
Icons.star_rounded,
color: Colors.white,
size: 25,
),
SizedBox(
width: 2,
),
Text(
"4.9",
style: TextStyle(color: Colors.white),
)
],
),
)
],
)
],
),
margin:
EdgeInsets.only(right: 18, left: 18, top: 15, bottom: 15),
padding: EdgeInsets.only(bottom: 15, top: 15),
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.5), BlendMode.dstOver),
image: AssetImage('./Assets/Bondi.jpg'),
),
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset(2, 2), //(x,y)
blurRadius: 5.0,
)
],
borderRadius: BorderRadius.circular(10),
),
height: MediaQuery.of(context).size.height / 1.7,
),
),
Container(
// height: 50,
child: Theme(
data: ThemeData(
splashColor: Colors.transparent,
highlightColor: Colors.transparent),
child: TabBar(
labelColor: Colors.black,
unselectedLabelColor: Colors.grey,
indicatorPadding: EdgeInsets.only(right: 16),
labelPadding: EdgeInsets.only(right: 16),
indicator: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5)),
tabs: [
Tab(
text: "Overview",
),
Tab(
text: "Reviews",
),
Tab(
text: "Friends",
),
],
),
),
),
Expanded(
child: TabBarView(
children: <Widget>[
Center(
child: Text("It's cloudy here",
style: textStyleRoboto(
textColor: ColorTheme.blackColor,
)),
),
Center(
child: Text("It's rainy here"),
),
Center(
child: Text("It's sunny here"),
),
],
),
),
]),
),
),
)),
);

Categories

Resources