Develop Reference

How can I make it scrollable

#override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: const Size.fromHeight(50),
child: AppBar(
flexibleSpace: Container(
decoration: const BoxDecoration(
gradient: GlobalVariables.appBarGradient,
),
),
title: Text(
widget.category,
style: const TextStyle(
color: Colors.black,
),
),
),
),
body: productList == null
? const Loader()
: Column(
children: [
Container(
padding:
const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
alignment: Alignment.topLeft,
child: Text(
'Keep shopping for ${widget.category}',
style: const TextStyle(
fontSize: 20,
),
),
),
SizedBox(
height: 170,
child: GridView.builder(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.only(left: 15),
itemCount: productList!.length,
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1,
childAspectRatio: 1.4,
mainAxisSpacing: 10,
),
itemBuilder: (context, index) {
final product = productList![index];
return GestureDetector(
onTap: () {
Navigator.pushNamed(
context,
ProductDetailScreen.routeName,
arguments: product,
);
},
child: Column(
children: [
SizedBox(
height: 130,
child: DecoratedBox(
decoration: BoxDecoration(
border: Border.all(
color: Colors.black12,
width: 0.5,
),
),
child: Padding(
padding: const EdgeInsets.all(10),
child: Image.network(
product.images[0],
),
),
),
),
Container(
alignment: Alignment.topLeft,
padding: const EdgeInsets.only(
left: 0,
top: 5,
right: 15,
),
child: Text(
product.name,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
),
);
},
),
),
I tried SingleChildScrollView in child but it didnt helped.
Code Image

You are using scrollDirection: Axis.horizontal, therefore it is scrolling horizontally. you can remove it or set to scrollDirection: Axis.vertical, on GridView.
child: GridView.builder(
scrollDirection: Axis.vertical, //this by default
padding: const EdgeInsets.only(left: 15),
No need to provide fixed heigth, use Expnaded widget to get available height, follow this snippet
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Container(
padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
alignment: Alignment.topLeft,
child: Text(
'Keep shopping for',
style: const TextStyle(
fontSize: 20,
),
),
),
Expanded(
child: GridView.builder(
padding: const EdgeInsets.only(left: 15),
itemCount: 44,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1,
childAspectRatio: 1.4,
mainAxisSpacing: 10,
),
itemBuilder: (context, index) {
// final product = productList![index];
return GestureDetector(
onTap: () {},
child: Column(
children: [
SizedBox(
height: 130,
child: DecoratedBox(
decoration: BoxDecoration(
border: Border.all(
color: Colors.black12,
width: 0.5,
),
),
child: Padding(
padding: const EdgeInsets.all(10),
// child: Image.network(
// product.images[0],
// ),
),
),
),
Container(
alignment: Alignment.topLeft,
padding: const EdgeInsets.only(
left: 0,
top: 5,
right: 15,
),
child: Text(
"name",
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
),
);
},
),
)
],
),
);
}

Using carousel slider with page view

I am using carousal slider with page view but when I am sliding the images in scroll view it is sliding to me to next page instead of next image. I just want to slide images when I slide on image and i want to slide to the next page when i slide below the image. but now wherever i slide on the screen it take me to the next page.
This is my page view.
import 'package:bartermade/controllers/profileController.dart';
import 'package:bartermade/models/tradeModel.dart';
import 'package:bartermade/widgets/profileView.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../screens/home/bottomBarViews/homeView/categoriesDetailScreen.dart';
class PageViewHolder extends StatelessWidget {
final PageController pageController = PageController(
initialPage: 0,
);
ProfileController _profileController = Get.find();
final String reciverId;
final String currentUserId;
final TradeModel catData;
PageViewHolder(
{required this.reciverId,
required this.currentUserId,
required this.catData});
var followersList = ['Ali', 'Hussain', 'Hassan', 'Akhtar'];
#override
Widget build(BuildContext context) {
// print("cat ID " + "${catData.user.id}");
// print("profile ID " + "${_profileController.profileId}");
return Scaffold(
body: PageView(
// physics: catData.user.id != _profileController.profileId.value
// ? AlwaysScrollableScrollPhysics()
// : NeverScrollableScrollPhysics(),
physics: ClampingScrollPhysics(),
pageSnapping: false,
onPageChanged: (index) {
},
controller: pageController,
children: [
//first screen in page view
TradeDetailScreen(
catData: catData,
currentUserId: currentUserId,
reciverId: reciverId,
),
//second screen here
ProfileView(
firstName: catData.user.firstName,
lastName: catData.user.lastName,
followers: followersList,
profileUrl: catData.user.profilePictureUrl,
screenState: true,
),
],
),
);
}
}
And this is my screen page
#override
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(
builder: (context, constraints) {
return OrientationBuilder(
builder: (context, orientation) => SafeArea(
child: SingleChildScrollView(
child: Column(children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
IconButton(
onPressed: () {
Get.back();
},
icon: Icon(
Icons.arrow_back_ios,
color: Colors.grey,
)),
Container(
clipBehavior: Clip.antiAlias,
height: 50,
width: 50,
decoration: BoxDecoration(
shape: BoxShape.circle,
),
child: CachedNetworkImage(
fit: BoxFit.cover,
imageUrl: '${widget.profileUrl}',
placeholder: (context, url) =>
Center(child: CircularProgressIndicator()),
errorWidget: (context, url, error) =>
Icon(Icons.error),
),
),
SizedBox(
width: 7,
),
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
"${widget.lastName ?? " " "${widget.firstName ?? " "}"}",
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: (MediaQuery.of(context)
.size
.height /
100) *
2),
),
widget.catData["user"] ==
profileController.userId.value
? Container(
height: 0,
width: 0,
)
: Container(
padding: EdgeInsets.all(5),
child: Center(
child: Text(
'Follow',
style: TextStyle(
color: Colors.white,
fontSize: 12),
),
),
//width: 50,
decoration: BoxDecoration(
color: AppColors.pinkAppBar,
borderRadius: BorderRadius.all(
Radius.circular(20)))),
],
),
Row(
//crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'4.3',
style: TextStyle(
color: Colors.grey,
fontWeight: FontWeight.bold,
fontSize: (MediaQuery.of(context)
.size
.height /
100) *
1.8),
),
Icon(
Icons.star,
size: 15,
color: Colors.yellow,
),
],
),
],
),
)
],
),
),
Column(
children: [
widget.catData["pictures"] == [] ||
widget.catData["pictures"].length == 0 ||
widget.catData["pictures"].isEmpty ||
widget.catData["pictures"] == null
? Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.6,
child: Center(child: Text(" No Image to show")))
: Stack(
children: [
CarouselSlider(
items: widget.catData["tradeWithPictures"]
.map<Widget>((e) {
return Container(
width: Get.width,
child: CachedNetworkImage(
fit: BoxFit.cover,
imageUrl: e['url'],
placeholder: (context, url) => Center(
child: CircularProgressIndicator()),
errorWidget: (context, url, error) =>
Icon(Icons.error),
),
);
}).toList(),
carouselController:
postController.carouselController,
options: CarouselOptions(
autoPlay: true,
enableInfiniteScroll: true,
height: Get.height * .7,
viewportFraction: 1.0,
enlargeCenterPage: false,
aspectRatio: 1 / 1.3,
onPageChanged: (index, reason) {
// postController.tradeImagesIndex(index);
// postController.carouselController.nextPage();
},
),
),
Positioned(
top: MediaQuery.of(context).size.height * 0.3,
bottom:
MediaQuery.of(context).size.height * 0.3,
left: 0,
right: 0,
child: Container(
padding:
EdgeInsets.symmetric(horizontal: 10),
width: MediaQuery.of(context).size.width,
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
ElevatedButton(
child: Icon(Icons.arrow_back_ios),
style: ButtonStyle(
splashFactory:
NoSplash.splashFactory,
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(25.0),
side: BorderSide(
color: AppColors.pinkColor),
),
),
),
onPressed: () {
postController.carouselController
.previousPage();
},
),
ElevatedButton(
child: Icon(Icons.arrow_forward_ios),
style: ButtonStyle(
splashFactory:
NoSplash.splashFactory,
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(25.0),
side: BorderSide(
color: AppColors.pinkColor),
),
),
),
onPressed: () {
postController.carouselController
.nextPage();
},
),
],
),
),
),
],
),
SizedBox(
height: 10,
),
],
),
Container(
margin: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
widget.catData["title"],
style: TextStyle(
color: AppColors.detailTextsColor,
fontWeight: FontWeight.bold),
),
profileController.userId == widget.catData["user"]
? Container(
height: 0,
width: 0,
)
: InkWell(
onTap: () {
},
child: Container(
padding: EdgeInsets.all(5),
child: Center(
child: Text(
'Offer Trade',
style: TextStyle(
color: Colors.white,
fontSize: 12),
),
),
//width: 50,
decoration: BoxDecoration(
color: AppColors.pinkAppBar,
borderRadius: BorderRadius.all(
Radius.circular(20),
),
),
),
),
],

How to scroll when + button is clicked in flutter?

I want when I click on the + Button it shows the next 3 containers that in the listVeiw it is horizontally direction.
Here is my code.
when I tap for the first time it works, but it doesn't work for the others taps
import 'package:flutter/material.dart';
class FindCars extends StatefulWidget {
const FindCars({Key? key}) : super(key: key);
#override
State<NewWayToFindCars> createState() => _NewWayToFindCarsState();
}
class _NewWayToFindCarsState extends State<NewWayToFindCars> {
var pricesListNumber = 10;
int counter = 1;
List months = [
'يناير',
'فبراير',
'مارس',
'ابريل',
'مايو',
'يونيو',
'يوليو',
'اغسطس',
'سبتمبر',
'اكتوبر',
'نوفمبر',
'ديسمبر'
];
var currentMonth = new DateTime.now().month;
var currentDay = new DateTime.now().day;
late ScrollController _scrollController;
#override
void initState() {
_scrollController = ScrollController();
super.initState();
}
#override
Widget build(BuildContext context) {
print(months[currentMonth - 1]);
print(currentDay);
print(DateTime.now());
return Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Directionality(
textDirection: TextDirection.rtl,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'${months[currentMonth - 1]} 2022',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black,
fontFamily: 'cairo',
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
InkWell(
onTap: () {
_scrollController.animateTo(-200,
duration: const Duration(milliseconds: 500),
curve: Curves.easeInOut);
},
child: Container(
child: Icon(Icons.remove, size: 22),
width: 50,
height: 50,
decoration: BoxDecoration(
color: Color(0xFFDCEDC8).withOpacity(0.5),
border: Border.all(
color: Color(0xFFDDE7DD).withOpacity(0.5),
width: 2.5,
),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
bottomLeft: Radius.circular(10),
),
),
),
),
InkWell(
onTap: () {
_scrollController.animateTo(200,
duration: const Duration(milliseconds: 500),
curve: Curves.easeInOut);
},
child: Container(
child: Center(child: Icon(Icons.add_sharp, size: 22)),
width: 50,
height: 50,
decoration: BoxDecoration(
color: Color(0xFFDCEDC8).withOpacity(0.25),
border: Border.all(
color: Color(0xFFDDE7DD).withOpacity(0.5),
width: 2.5,
),
borderRadius: BorderRadius.only(
topRight: Radius.circular(10),
bottomRight: Radius.circular(10),
),
),
),
),
],
),
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.1,
child: ListView(
controller: _scrollController, // scroll contoller
scrollDirection: Axis.horizontal,
children: new List.generate(
pricesListNumber,
(index) => Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
child: Center(child: Text('${currentDay++}')),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
color: Color(0xFFDCEDC8).withOpacity(0.5),
border: Border.all(
color: Color(0xFFDDE7DD).withOpacity(0.5),
width: 2.5,
),
borderRadius: BorderRadius.circular(10),
),
height: 50,
width: MediaQuery.of(context).size.width * 0.25,
),
),
),
),
),
],
),
),
);
}
}
Here is my code for the UI, and now it is only works in the first click put it does not work until the end.
Can you please help me with that?

Attach a ScrollController to your scrollable widget and then use scrollController.animateTo(//offset) to reach where you want.
Do check the animateTo method on this page.
EDIT:
sample code:
ScrollController scrollController = ScrollController();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter'),
centerTitle: true,
),
body: Column(
children: [
ElevatedButton(
onPressed: () {
scrollController.animateTo(0,
duration: Duration(seconds: 1), curve: Curves.easeIn);
},
child: Text("go top")),
Expanded(
flex: 1,
child: ListView.builder(
controller: scrollController,
itemCount: 100,
itemBuilder: (context, index) {
return Text('This is it.');
},
),
),
],
),
);
}
Try it in your IDE.
EDIT:
Here is the problem in your code, you need to decrease/increase the current offset of the scroll controller by subtracting/adding 200 from the scrollController.position. You are getting it moved for the first time because at that time offset is not at 200 and for the second time it is there at 200. That is why it is not moving which is obviously no error.

Just use a scrollController, attach it to your ListView builder,
then on your Button's onPress/onTap method, call _scrolController.animateTo(someOffset)
Copy the code below and run into your project. I have customized it based on your needs.
import 'package:flutter/material.dart';
class TestView extends StatefulWidget {
const TestView({Key? key}) : super(key: key);
#override
State<TestView> createState() => _TestViewState();
}
class _TestViewState extends State<TestView> {
late ScrollController _scrollController;
#override
void initState() {
_scrollController = ScrollController();
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
ElevatedButton(
onPressed: () {
_scrollController.animateTo(-500,
duration: const Duration(milliseconds: 500),
curve: Curves.easeInOut);
},
child: const Text("-")),
ElevatedButton(
onPressed: () {
_scrollController.animateTo(500,
duration: const Duration(milliseconds: 500),
curve: Curves.easeInOut);
},
child: const Text("+"),
),
],
),
SizedBox(
height: 200,
child: ListView(
controller: _scrollController,
scrollDirection: Axis.horizontal,
children: List.generate(20, (index) {
return Container(
color: Colors.amber,
height: 100,
width: 100,
margin: const EdgeInsets.only(right: 10),
child: Center(child: Text("$index")),
);
}),
),
)
],
),
);
}
}

Flutter Listview can't scroll and not display all list

i just started with flutter. in my case, i want to show 10 items listview on my home page. but that listview only shows 9 items. listview cannot be scrolled to show other item. can you see whats wrong with my code?
I have been looking for a solution to this problem by looking for a topic that has the same title, but nothing. i have changed some lines of my code but i get error "bottom overlow by 240px"
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
#override
_HomePageState createState() => _HomePageState();
}
Future<Null> _fetchPartner() async {
print('Please Wait');
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(statusBarColor: Colors.transparent),
);
return Scaffold(
resizeToAvoidBottomInset: false,
body: RefreshIndicator(
onRefresh: _fetchPartner,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
physics: AlwaysScrollableScrollPhysics(),
child: Column(
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding:
const EdgeInsetsDirectional.only(top: 18, bottom: 18),
child: Text("Powered By:",
style: new TextStyle(fontSize: 18.0)),
)
],
),
ListView.builder(
padding: EdgeInsets.zero,
shrinkWrap: true,
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return Card(
margin: EdgeInsets.zero,
elevation: 0.4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0),
),
child: Container(
child: ListTile(
leading: CircleAvatar(
child: Image.network(
"https://via.placeholder.com/150")),
title: Text(
"Coconut Oil",
style: TextStyle(
color: Colors.black87,
fontWeight: FontWeight.bold),
),
subtitle: Row(
children: <Widget>[
Icon(Icons.linear_scale,
color: Colors.greenAccent),
Text("Go Green!",
style:
TextStyle(color: Colors.black87))
],
),
trailing: Icon(Icons.keyboard_arrow_right,
color: Colors.black87, size: 30.0))));
})
],
),
),
));
}
}

Try below code Its working properly:
SingleChildScrollView(
child: Column(
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsetsDirectional.only(top: 18, bottom: 18),
child: Text(
"Powered By:",
style: new TextStyle(fontSize: 18.0),
),
)
],
),
ListView.builder(
padding: EdgeInsets.zero,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return Card(
margin: EdgeInsets.zero,
elevation: 0.4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0),
),
child: Container(
child: ListTile(
leading: CircleAvatar(
child:
Image.network("https://via.placeholder.com/150")),
title: Text(
"Coconut Oil",
style: TextStyle(
color: Colors.black87, fontWeight: FontWeight.bold),
),
subtitle: Row(
children: <Widget>[
Icon(Icons.linear_scale, color: Colors.greenAccent),
Text(
"Go Green!",
style: TextStyle(color: Colors.black87),
)
],
),
trailing: Icon(
Icons.keyboard_arrow_right,
color: Colors.black87,
size: 30.0,
),
),
),
);
},
)
],
),
),
Your result screen:

Add this property to Listivew.Builder
physics : NeverScrollableScrollPhysics()
as it is inside SingleChildScrollView.

Add this line to your code.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
#override
_HomePageState createState() => _HomePageState();
}
Future<Null> _fetchPartner() async {
print('Please Wait');
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(statusBarColor: Colors.transparent),
);
return Scaffold(
resizeToAvoidBottomInset: false,
body: RefreshIndicator(
onRefresh: _fetchPartner,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
physics: AlwaysScrollableScrollPhysics(),
child: Column(
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding:
const EdgeInsetsDirectional.only(top: 18, bottom: 18),
child: Text("Powered By:",
style: new TextStyle(fontSize: 18.0)),
)
],
),
ListView.builder(
padding: EdgeInsets.zero,
physics : NeverScrollableScrollPhysics()
shrinkWrap: true,
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return Card(
margin: EdgeInsets.zero,
elevation: 0.4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0),
),
child: Container(
child: ListTile(
leading: CircleAvatar(
child: Image.network(
"https://via.placeholder.com/150")),
title: Text(
"Coconut Oil",
style: TextStyle(
color: Colors.black87,
fontWeight: FontWeight.bold),
),
subtitle: Row(
children: <Widget>[
Icon(Icons.linear_scale,
color: Colors.greenAccent),
Text("Go Green!",
style:
TextStyle(color: Colors.black87))
],
),
trailing: Icon(Icons.keyboard_arrow_right,
color: Colors.black87, size: 30.0))));
})
],
),
),
));
}
}

Remove the singleChildScrollview and add a expanded widget on the listview.builder.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
#override
_HomePageState createState() => _HomePageState();
}
Future<Null> _fetchPartner() async {
print('Please Wait');
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(statusBarColor: Colors.transparent),
);
return Scaffold(
resizeToAvoidBottomInset: false,
body: RefreshIndicator(
onRefresh: _fetchPartner,
child: Column(
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding:
const EdgeInsetsDirectional.only(top: 18, bottom: 18),
child: Text("Powered By:",
style: new TextStyle(fontSize: 18.0)),
)
],
),
Expanded(
child : ListView.builder(
padding: EdgeInsets.zero,
shrinkWrap: true,
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return Card(
margin: EdgeInsets.zero,
elevation: 0.4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0),
),
child: Container(
child: ListTile(
leading: CircleAvatar(
child: Image.network(
"https://via.placeholder.com/150")),
title: Text(
"Coconut Oil",
style: TextStyle(
color: Colors.black87,
fontWeight: FontWeight.bold),
),
subtitle: Row(
children: <Widget>[
Icon(Icons.linear_scale,
color: Colors.greenAccent),
Text("Go Green!",
style:
TextStyle(color: Colors.black87))
],
),
trailing: Icon(Icons.keyboard_arrow_right,
color: Colors.black87, size: 30.0))));
})
],
),
),
));
}
}

Please try with this code
replace your body tag with this and let me know
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsetsDirectional.only(top: 18, bottom: 18),
child:
Text("Powered By:", style: new TextStyle(fontSize: 18.0)),
)
],
) ,
Expanded ( child : ListView.builder(
padding: EdgeInsets.zero,
shrinkWrap: true,
itemCount: 13,
itemBuilder: (BuildContext context, int index) {
return Card(
margin: EdgeInsets.zero,
elevation: 0.4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0),
),
child: Container(
child: ListTile(
leading: CircleAvatar(
child: Image.network(
"")),
title: Text(
"Coconut Oil",
style: TextStyle(
color: Colors.black87,
fontWeight: FontWeight.bold),
),
subtitle: Row(
children: <Widget>[
Icon(Icons.linear_scale,
color: Colors.greenAccent),
Text("Go Green!",
style: TextStyle(color: Colors.black87))
],
),
trailing: Icon(Icons.keyboard_arrow_right,
color: Colors.black87, size: 30.0))));
}) )
]
)

I am not convinced that any of the provided solutions is the right one. All of them use shrinkWrap: true. With only 10 elements this should not impact performance, but when it changes to 10k, well it will be a problem. I would simplify the tree by removing SingleChildScrollView and Column, moving Row from Column to ListView.builder, and displaying it only when the index == 0. We need to remember to add 1 in itemCount and remove shrinkWrap. There is another solution with the use of SliverList, but it would complicate too much without additional benefits. Below is the code for the first solution.
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
#override
_HomePageState createState() => _HomePageState();
}
Future<Null> _fetchPartner() async {
print('Please Wait');
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
body: RefreshIndicator(
onRefresh: _fetchPartner,
child: ListView.builder(
itemCount: 10 + 1,
itemBuilder: (BuildContext context, int index) {
if (index == 0) {
return Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsetsDirectional.only(
top: 18, bottom: 18),
child: Text("Powered By:",
style: new TextStyle(fontSize: 18.0)),
)
],
);
}
return Card(
margin: EdgeInsets.zero,
elevation: 0.4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0),
),
child: Container(
child: ListTile(
leading: CircleAvatar(
child: Image.network(
"https://via.placeholder.com/150")),
title: Text(
"Coconut Oil",
style: TextStyle(
color: Colors.black87,
fontWeight: FontWeight.bold),
),
subtitle: Row(
children: <Widget>[
Icon(Icons.linear_scale,
color: Colors.greenAccent),
Text("Go Green!",
style: TextStyle(color: Colors.black87))
],
),
trailing: Icon(Icons.keyboard_arrow_right,
color: Colors.black87, size: 30.0))));
}),
));
}
}

Using TabBarView with DraggableScrollableSheet in Flutter

I am developing a city travel guide application for my project. In this project, I have page like this:
Screenshot
In this page, I want to make the container with red border scrollable vertically until green line with DraggableScrollableSheet . And also I want to add TabBarView to the same container and scroll horizontally.
But I can not handle, encountered with many render errors.
How can i fix this?
Here is the full code:
import 'package:after_layout/after_layout.dart';
import 'package:flutter/material.dart';
class CategoryScreen extends StatefulWidget {
final double _expandedBottomSheetBottomPosition = 0;
final townimage;
const CategoryScreen({Key key, this.townimage}) : super(key: key);
#override
_CategoryScreen createState() => _CategoryScreen(
townimage: this.townimage,
);
}
class _CategoryScreen extends State<CategoryScreen>
with TickerProviderStateMixin, AfterLayoutMixin<CategoryScreen> {
var townimage;
_CategoryScreen({this.townimage});
double _bottomSheetBottomPosition = -330;
bool isCollapsed = false;
TabController _tabController;
#override
void initState() {
super.initState();
_tabController = TabController(length: 2, vsync: this);
}
#override
Widget build(BuildContext context) {
return Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(elevation: 0, backgroundColor: Colors.transparent),
body: Container(
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Hero(
tag: "image" + townimage,
child: Image.asset(
"images/photos/turkey.jpg",
fit: BoxFit.cover,
)),
AnimatedPositioned(
duration: const Duration(milliseconds: 500),
curve: Curves.decelerate,
bottom: _bottomSheetBottomPosition,
left: 0,
right: 0,
child: Column(
children: [
_tabBar(),
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 3.0),
color: Theme.of(context).canvasColor,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40),
topRight: Radius.circular(40),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
padding: const EdgeInsets.symmetric(horizontal: 32),
height: 90,
child: Row(
children: [
Text(
"Historical Places",
style: TextStyle(
fontSize: 28.0,
color: Colors.white,
fontWeight: FontWeight.bold),
),
],
),
),
SingleChildScrollView(
physics: ScrollPhysics(),
child: _clipsWidget(),
),
],
),
),
],
),
),
],
),
),
);
}
Widget _clipsWidget() {
return Container(
color: Theme.of(context).canvasColor,
height: 250,
margin: const EdgeInsets.symmetric(horizontal: 16),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.account_balance_rounded),
Text("I want to add TabBarView to this area"),
Text(
"Some Future Builder elements will be implemented.",
)
],
),
));
}
#override
void afterFirstLayout(BuildContext context) {
Future.delayed(const Duration(milliseconds: 500), () {
setState(() {
isCollapsed = true;
_bottomSheetBottomPosition = widget._expandedBottomSheetBottomPosition;
});
});
}
Widget _tabBar() {
return TabBar(
controller: _tabController,
indicatorColor: Colors.transparent,
isScrollable: true,
labelColor: Colors.white,
unselectedLabelColor: Colors.grey,
labelPadding: EdgeInsets.symmetric(horizontal: 10),
tabs: [
Container(
height: 70,
child: Tab(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
margin: EdgeInsets.all(5),
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
color: Theme.of(context).canvasColor.withOpacity(0.8),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(
Icons.account_balance_rounded,
),
),
),
],
)),
),
Container(
height: 70,
child: Tab(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
margin: EdgeInsets.all(5),
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
color: Theme.of(context).canvasColor.withOpacity(0.8),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(
Icons.park,
),
),
),
],
)),
),
]);
}
}