Related
I am trying to make a listview for a forum page but for the row under trailing and under the row where forumdata.getnop and the other data cannot be displayed under the list tile how do I fix this? there is no error with the class as removing the sized box with height 19 will just make it have an overflow error.
image of current app : -
Code : -
Container(
margin: const EdgeInsets.symmetric(vertical: 20.0),
height: 900.0,
child: ListView.separated(
physics: NeverScrollableScrollPhysics(),
itemCount: forumdata.getfLength(),
separatorBuilder: (BuildContext context, int index) =>
const Divider(),
itemBuilder: (BuildContext context, int index) {
return ListTile(
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => ThreadPageScreen(
index: index,
)),
);
},
visualDensity: VisualDensity(vertical: 4),
leading: CircleAvatar(
backgroundColor:
Color(forumdata.getfcolor(index)),
child: Icon(
forumdata.getIcon(index),
color: Color(forumdata.geticolor(index)),
),
),
trailing: SizedBox(
width: 300,
height: 300,
child: Padding(
padding:
EdgeInsets.only(left: 20),
child: Column(
children: [
Container(
child: Align(
alignment: Alignment.centerLeft,
child: Text(
forumdata.getTitle(index),
maxLines: 1,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15,
color: Colors.blue),
),
),
),
Container(
child: Align(
alignment: Alignment.centerLeft,
child: Text(
forumdata.getDesc(index),
maxLines: 2,
),
),
),
Padding(
padding: EdgeInsets.only(left: 20),
child: SizedBox(
width: 300,
height: 19,
child: Row(
children: [
Container(
child: Padding(
padding:
EdgeInsets.only(
bottom: 20),
child: Row(
children: [
Text(
forumdata
.getnop(
index)
.toString() +
" posts " +
" ",
style:
TextStyle(
color: Colors
.grey,
fontSize: 3,
),
),
CircleAvatar(
child: Image
.network(
userdata.getProfileIcon(
forumdata
.getuser(index)),
),
),
Text(
" " +
forumdata
.getDateTime(
index),
style:
TextStyle(
color: Colors
.grey,
),
),
],
),
),
),
],
),
),
),
],
),
),
),
);
On a quick view, From this section of code:
SizedBox(
width: 300,
height: 19,
child: Row(children: [
Container(
child:
Padding(padding: EdgeInsets.only(bottom: 20),
child: Row(
Height of the SizedBox is 19 and the padding above second Row is 20. Thus the bottom padding completely hide the row.
trailing: SizedBox(
width: 300,
height: 300,
child: Padding(
/// replace with this
title: SizedBox(
width: MediaQuery.of(context).size.width,
child: Padding(
Basically I want to change content on selecting the TabBar options. Here's my code. Also I'm new to flutter. I've also created a _incrementCounter() and getter setter methods. By using _incrementCounter() I'm returning an integer in order to update the PAgeView of my screen which is implemented inside a List called tabsCat. But on calling the _incrementCounter() method on line 264 it does not give the updated value please guide.
import 'dart:ui';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:fluttertravelapp/models/beach_model.dart';
import 'package:fluttertravelapp/models/new_category_model.dart';
import 'package:fluttertravelapp/models/popular_model.dart';
import 'package:fluttertravelapp/models/recommended_model.dart';
import 'package:fluttertravelapp/screens/selected_category_screen.dart';
import 'package:fluttertravelapp/screens/selected_place_screen.dart';
import 'package:fluttertravelapp/widgets/bottom_navigation_bar.dart';
import 'package:fluttertravelapp/widgets/custom_tab_indicator.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';
class HomeScreen extends StatefulWidget {
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
int count = 0;
// Creating the getter method
// to get input from Field/Property
int get getCount {
return count;
}
// Creating the setter method
// to set the input in Field/Property
set setCount(int newCount) {
count = newCount;
}
int _incrementCounter() {
int index = 0;
setState(() {
index = getCount;
print(index);
});
return index;
}
/// Page Controller
final _pageController = PageController(viewportFraction: 0.877);
#override
Widget build(BuildContext context) {
int tabIndex = 0;
List tabsCat = [
PageView(
physics: BouncingScrollPhysics(),
controller: _pageController,
scrollDirection: Axis.horizontal,
children: List.generate(
recommendations.length,
(int index) => GestureDetector(
onTap: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => SelectedCategoryScreen(
newCategoryModel: newCategories[index])));
},
child: Container(
margin: EdgeInsets.only(right: 28.8),
width: 333.6,
height: 218.4,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(9.6),
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage(newCategories[index].image),
),
),
child: Stack(
children: <Widget>[
Positioned(
bottom: 19.2,
left: 19.2,
child: ClipRRect(
borderRadius: BorderRadius.circular(4.8),
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaY: 19.2, sigmaX: 19.2),
child: Container(
height: 36,
padding: EdgeInsets.only(
left: 16.72, right: 14.4),
alignment: Alignment.centerLeft,
child: Row(
children: <Widget>[
SvgPicture.asset(
'assets/svg/icon_location.svg'),
SizedBox(
width: 9.52,
),
Text(
recommendations[index].name,
style: GoogleFonts.lato(
fontWeight: FontWeight.w700,
color: Colors.white,
fontSize: 16.8),
)
],
),
),
),
),
)
],
),
),
),
),
),
PageView(
physics: BouncingScrollPhysics(),
controller: _pageController,
scrollDirection: Axis.horizontal,
children: List.generate(
recommendations.length,
(int index) => GestureDetector(
onTap: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => SelectedCategoryScreen(
newCategoryModel: newCategories[index])));
},
child: Container(
margin: EdgeInsets.only(right: 28.8),
width: 333.6,
height: 218.4,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(9.6),
image: DecorationImage(
fit: BoxFit.cover,
image: CachedNetworkImageProvider(recommendations[index].image),
),
),
child: Stack(
children: <Widget>[
Positioned(
bottom: 19.2,
left: 19.2,
child: ClipRRect(
borderRadius: BorderRadius.circular(4.8),
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaY: 19.2, sigmaX: 19.2),
child: Container(
height: 36,
padding: EdgeInsets.only(
left: 16.72, right: 14.4),
alignment: Alignment.centerLeft,
child: Row(
children: <Widget>[
SvgPicture.asset(
'assets/svg/icon_location.svg'),
SizedBox(
width: 9.52,
),
Text(
recommendations[index].name,
style: GoogleFonts.lato(
fontWeight: FontWeight.w700,
color: Colors.white,
fontSize: 16.8),
)
],
),
),
),
),
)
],
),
),
),
),
),
];
return Scaffold(
//bottomNavigationBar: BottomNavigationBarTravel(),
body: SafeArea(
child: Container(
child: ListView(
physics: BouncingScrollPhysics(),
children: <Widget>[
/// Custom Navigation Drawer and Search Button
Container(
height: 57.6,
margin: EdgeInsets.only(top: 28.8, left: 28.8, right: 28.8),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
],
),
),
/// Text Widget for Title
Padding(
padding: EdgeInsets.only(top: 0, left: 28.8),
child: Text(
'Explore\nPakistan',
style: GoogleFonts.playfairDisplay(
fontSize: 45.6, fontWeight: FontWeight.w700),
),
),
/// Custom Tab bar with Custom Indicator
Column(
children:
[DefaultTabController(
length: 4,
child: TabBar(
labelPadding: EdgeInsets.only(left: 14.4, right: 14.4),
indicatorPadding:
EdgeInsets.only(left: 14.4, right: 14.4),
isScrollable: true,
labelColor: Color(0xFF000000),
unselectedLabelColor: Color(0xFF8a8a8a),
labelStyle: GoogleFonts.lato(
fontSize: 14, fontWeight: FontWeight.w700),
unselectedLabelStyle: GoogleFonts.lato(
fontSize: 14, fontWeight: FontWeight.w700),
indicator: RoundedRectangleTabIndicator(
color: Color(0xFF000000), weight: 2.4, width: 14.4),
onTap: (index){
setCount = index;
//print(getCount);
},
tabs: [
Tab(
child: Container(
child: Text('Recommended'),
),
),
Tab(
child: Container(
child: Text('Popular'),
),
),
Tab(
child: Container(
child: Text('New Destination'),
),
),
Tab(
child: Container(
child: Text('Hidden Gems'),
),
)
]),
),
/// ListView widget with PageView
/// Recommendations Section
Container(
height: 218.4,
margin: EdgeInsets.only(top: 16),
child: tabsCat[_incrementCounter()],
),
]),
/// Dots Indicator
/// Using SmoothPageIndicator Library
Padding(
padding: EdgeInsets.only(left: 28.8, top: 28.8),
child: SmoothPageIndicator(
controller: _pageController,
count: recommendations.length,
effect: ExpandingDotsEffect(
activeDotColor: Color(0xFF8a8a8a),
dotColor: Color(0xFFababab),
dotHeight: 4.8,
dotWidth: 6,
spacing: 4.8),
),
),
/// Text Widget for Popular Categories
Padding(
padding: EdgeInsets.only(top: 48, left: 28.8, right: 28.8),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width*0.4,
child: FittedBox(
child: Text(
'Popular Categories',
style: GoogleFonts.playfairDisplay(
fontWeight: FontWeight.w700,
color: Color(0xFF000000),
),
),
),
),
Container(width: MediaQuery.of(context).size.width*0.1,
child: FittedBox(
child: Text(
'Show All ',
style: GoogleFonts.lato(
fontWeight: FontWeight.w500,
color: Color(0xFF8a8a8a),
),
),
),
)
],
),
),
/// ListView for Popular Categories Section
Container(
margin: EdgeInsets.only(top: 33.6),
height: 45.6,
child: ListView.builder(
itemCount: populars.length,
scrollDirection: Axis.horizontal,
physics: BouncingScrollPhysics(),
padding: EdgeInsets.only(left: 28.8, right: 9.6),
itemBuilder: (context, index) {
return Container(
margin: EdgeInsets.only(right: 19.2),
height: 45.6,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(9.6),
color: Color(populars[index].color),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
width: 19.2,
),
Image.asset(
populars[index].image,
height: 16.8,
),
SizedBox(
width: 19.2,
)
],
),
);
},
),
),
/// ListView for Beach Section
Container(
margin: EdgeInsets.only(top: 28.8, bottom: 16.8),
height: 124.8,
child: ListView.builder(
itemCount: beaches.length,
padding: EdgeInsets.only(left: 28.8, right: 12),
scrollDirection: Axis.horizontal,
physics: BouncingScrollPhysics(),
itemBuilder: (context, index) {
return Container(
height: 124.8,
width: 188.4,
margin: EdgeInsets.only(right: 16.8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(9.6),
image: DecorationImage(
fit: BoxFit.cover,
image:
CachedNetworkImageProvider(beaches[index].image),
),
),
);
},
),
)
],
),
),
),
);
}
}
Solve the error by calling the _incrementcounter method onto OnTap section. Here's my code changes:
Edited incrementcounter method and declare new method setNewCount,
void setNewCount(int newCount) {
count = newCount;
}
void _incrementCounter() {
setState(() {
count = getCount;
});
}
2nd change :
onTap: (index){
setNewCount(index);
_incrementCounter();
},
3rd change:
Container(
height: 218.4,
margin: EdgeInsets.only(top: 16),
child: tabsCat[count],
),
Try
onTap: (index){
setCount(index);
//print(getCount);
},
instead of
onTap: (index){
setCount = index;
//print(getCount);
},
I have a screen in my application where I create a bunch of cards from a map using ListView.builder:
Now I want to click on those cards and when I do, I go to a new activity and pass the name of the doctor and the rest of his information to the new activity.
How can I do that?
this is a code sample
class DocBanner extends StatelessWidget {
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 10),
child: Text(
'Our Doctors:',
style: TextStyle(
fontSize: 18,
),
),
),
Container(
padding: EdgeInsets.symmetric(
horizontal: 5.0,
vertical: 25.0,
),
height: 190,
width: size.width,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemBuilder: (context, index) {
return Container(
width: size.width - 150,
child: Card(
child: Padding(
padding: const EdgeInsets.all(18.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'${myList[index]['name']}',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
letterSpacing: 2,
),
),
SizedBox(
height: size.height - (size.height * 0.99),
),
Text(
'${myList[index]['specialite']}',
style: TextStyle(
fontSize: 20,
),
),
SizedBox(
height: size.height - (size.height * 0.99),
),
Text(
'${myList[index]['city']}',
style: TextStyle(
fontSize: 20,
color: Colors.red,
),
),
],
),
),
),
);
},
itemCount: myList.length,
),
),
],
);
}
}
You can use a GestureDetector and navigate to another screen in onTap method, like this:
ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemBuilder: (context, index) {
return GestureDetector(
onTap: navigateToOtherScreen(myList[index]),
child: Container(
....
I am saving some list of data to Sharedprefrence and tried to call the data from saved sharedprefrence and it returs all the values i have saved,then i tried to show data from sharedprefrence to a text widget but it shows null,
i need something like,if i have t text widgets how do pass data to those two widget let's say ₹575 and TWA Cap
Retrieving the data from sharedprfrence
List<String> listdata=[];
void initState() {
super.initState();
SharedPrefrence().getCartItem().then((data) async{
listdata = data;
print(listdata);
});
}
this what i am geting from the sharedprefrence
[TWA Cap, ₹575, M, Red]
trying to shows te data to text widget (Whole widget)
Widget CoupensLists() {
return SingleChildScrollView(
physics: NeverScrollableScrollPhysics(),
child: Container(
child: ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return Row(
children: <Widget>[
Expanded(
child: Card(
elevation: 10,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: GestureDetector(
onTap: () {
},
child: Container(
height: 150,
width: 350,
child: Row(
children: <Widget>[
Column(
children: <Widget>[
Padding(
padding:
const EdgeInsets.symmetric(vertical: 5),
child: Container(
height: 50,
width: 80,
child: Image.network("image"),
/* decoration: BoxDecoration(
image: DecorationImage(
image: Image.,
fit: BoxFit.fill,
),
),*/
),
),
SizedBox(
height: 5,
),
Text(
"Prodcut name",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold),
),
Text("Prodcut name",
style: TextStyle(fontSize: 12)),
SizedBox(
height: 10,
),
Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(
vertical: 4),
child: Container(
width: 80,
child: Stack(
children: <Widget>[
SvgPicture.asset(
'assets/images/bg_price_btn_black.svg',
),
Padding(
padding: const EdgeInsets.all(5),
child: Text(
"Price"
style: TextStyle(
color: Colors.white,
fontSize: 12),
),
)
],
),
),
),
Stack(
children: <Widget>[
SvgPicture.asset(
'assets/images/bg_boon_btn_red.svg',
),
Padding(
padding: const EdgeInsets.all(5),
child: Text(
"Book Now",
style: TextStyle(
color: Colors.white,
fontSize: 12),
),
)
],
),
],
),
],
),
],
),
),
),
),
),
],
);
},
),
),
);
}
Try this:
List<String> listdata=[];
void initState() {
super.initState();
SharedPrefrence().getCartItem().then((data) async{
setState(() {
listdata = data;
});
});
}
You're getting this because you didn't upated your screen after changing the listdata variable
use in initail function
setState(() {
listdata = data;
});
then
Widget CoupensLists() {
return SingleChildScrollView(
physics: NeverScrollableScrollPhysics(),
child: Container(
child: ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return Row(
children: <Widget>[
Expanded(
child: Card(
elevation: 10,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: GestureDetector(
onTap: () {
},
child: Container(
height: 150,
width: 350,
child: Row(
children: <Widget>[
Column(
children: <Widget>[
Padding(
padding:
const EdgeInsets.symmetric(vertical: 5),
child: Container(
height: 50,
width: 80,
child: Image.network("image"),
/* decoration: BoxDecoration(
image: DecorationImage(
image: Image.,
fit: BoxFit.fill,
),
),*/
),
),
SizedBox(
height: 5,
),
Text(
listdata.length!=0? listdata[0]:"",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold),
),
Text( listdata.length!=0? listdata[1]:"",
style: TextStyle(fontSize: 12)),
SizedBox(
height: 10,
),
Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(
vertical: 4),
child: Container(
width: 80,
child: Stack(
children: <Widget>[
SvgPicture.asset(
'assets/images/bg_price_btn_black.svg',
),
Padding(
padding: const EdgeInsets.all(5),
child: Text(
listdata.length!=0? listdata[2]:"",
style: TextStyle(
color: Colors.white,
fontSize: 12),
),
)
],
),
),
),
Stack(
children: <Widget>[
SvgPicture.asset(
'assets/images/bg_boon_btn_red.svg',
),
Padding(
padding: const EdgeInsets.all(5),
child: Text(
listdata.length!=0? listdata[3]:"",
style: TextStyle(
color: Colors.white,
fontSize: 12),
),
)
],
),
],
),
],
),
],
),
),
),
),
),
],
);
},
),``
),
);
}
import 'package:firebase_database/firebase_database.dart';
import 'package:flutter/material.dart';
class Screen extends StatefulWidget {
#override
_UserProfileScreenState createState() => _UserProfileScreenState();
}
class _UserProfileScreenState extends State<Screen> {
Widget randomjobs() {
final dbRef = FirebaseDatabase.instance
.reference()
.child("Add Job Details")
.limitToFirst(3);
return FutureBuilder(
future: dbRef.once(),
builder: (context, AsyncSnapshot<DataSnapshot> snapshot) {
if (snapshot.hasData) {
List<Map<dynamic, dynamic>> list = [];
if (snapshot.data.value == null) {
return Text("no Data");
}
for (String key in snapshot.data.value.keys) {
list.add(snapshot.data.value[key]);
}
return ListView.builder(
itemCount: snapshot.data.value.length,
itemBuilder: (BuildContext context, int index) {
return Container(
margin: EdgeInsets.only(top: 20.0),
height: 220.0,
child: PageView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 8, right: 8),
padding: EdgeInsets.only(
top: 20.0, left: 20.0, right: 20.0),
width: 240.0,
height: 240.0,
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(20.0)),
gradient: LinearGradient(
begin: Alignment.bottomRight,
end: Alignment.topLeft,
stops: [0.2, 0.6],
colors: [
Color(0xff7500bf),
Color(0xff5b1ad1),
],
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Text(list[index]["Job Title"],
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w500,
color: Color(0xfffefeff))),
),
Container(
margin: EdgeInsets.only(top: 10.0),
child: Opacity(
opacity: 0.6,
child: Text(list[index]["Job Title"],
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w600,
color: Color(0xffffffff))),
),
),
Container(
margin: EdgeInsets.only(top: 10.0),
child: Opacity(
opacity: 0.49,
child: Text(list[index]["Job Title"],
style: TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w600,
color: Color(0xffffffff))),
),
),
Container(
margin: EdgeInsets.only(top: 60.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
GestureDetector(
onTap: () {},
child: Container(
padding: EdgeInsets.only(
top: 12.0,
left: 15.0,
right: 15.0,
bottom: 12.0),
decoration: BoxDecoration(
color: new Color.fromRGBO(
255, 255, 255, 0.5),
borderRadius: BorderRadius.all(
Radius.circular(12.0))),
child: Opacity(
opacity: 0.7,
child: Text('APPLY',
style: TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w600,
color: Color(0xfffefeff))),
),
),
)
],
),
)
],
),
)
],
));
});
}
return CircularProgressIndicator();
},
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Job')),
body: randomjobs(),
);
}
}
This is the total page code. it prints in the vertical direction whereas i need it in horizontal.Even though I am using scroll direction horizontal I am not able to make it happen.Can you help. scrollDirection: Axis.horizontal I have used this in my code but the result is still I am not able to get horizontal scroll below my app bar.
Thank you
Is this what your trying?
body: ListView.builder(
shrinkWrap: true,
//add item count depending on your list
//itemCount: list.length,
itemCount: 4,
//added scrolldirection
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) {
//Removed your pageview
return Container(
height: 240.0,
margin: EdgeInsets.only(left: 8, right: 8, top: 20),
padding: EdgeInsets.only(top: 20.0, left: 20.0, right: 20.0),
// rest of your code