Develop Reference

Flutter DraggableScrollableSheet Lock One Part on top

I Had Question For how create Scroll List Like this
Flutter Scroll List Over Header
According to the answers given, I used DraggableScrollableSheet for implementing this scroll view
but now i have new problem
The Result is here:
now I need to when im scrolling the top Child Stay On Top, like a header
how can do this?
Here is my Code
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
double height = MediaQuery.of(context).size.height;
AppController appController = Provider.of<AppController>(context);
HomeController homeController = Provider.of<HomeController>(context);
String selectedCategory = homeController.selectedCategory;
return SafeArea(
child: Container(
//height: 450,
width: double.infinity,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/home_header.png'),
alignment: Alignment.topCenter,
)),
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
flexibleSpace: Padding(
padding: const EdgeInsets.only(left: 20, right: 20),
child: ChiscoAppbar(
icon: MENU,
iconAlignment: Alignment.centerLeft,
title: 'خانه',
onClick: () {
Navigator.pushNamed(context, '/account');
},
),
),
),
backgroundColor: Colors.transparent,
body: Stack(
children: [
Positioned(
child: Container(
color: Colors.transparent,
height: 200,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const Expanded(
flex: 3,
child: Align(
alignment: Alignment.center,
child: ChiscoText(
text: 'دستگاه‌های هوشمند چیسکو',
fontWeight: FontWeight.w500,
textColor: Colors.white,
fontSize: 16,
)),
),
Expanded(
flex: 1,
child: Padding(
padding: EdgeInsets.only(left: 20, right: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
HeaderItem(
titleText: 'کنترلر',
icon: COOLER,
counterText: '2',
),
HeaderItem(
titleText: 'سه راهی',
icon: SOCKET,
counterText: '2',
)
],
),
)),
],
),
),
),
Positioned(
child: DraggableScrollableSheet(
expand: true,
minChildSize: 0.70,
maxChildSize: 0.95,
initialChildSize: 0.70,
builder: (context, scrollController) {
return SingleChildScrollView(
controller: scrollController,
child: Container(
decoration: BoxDecoration(
color: Colors.blue[100],
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(25),
topRight: Radius.circular(25))),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
ListHandlerView(),
Container(
margin: const EdgeInsets.fromLTRB(20, 8, 20, 10),
height: 30,
child: ListView.builder(
shrinkWrap: true,
physics: const BouncingScrollPhysics(),
itemCount: appController
.listOfDevicesCategory.length,
scrollDirection: Axis.horizontal,
primary: true,
addSemanticIndexes: false,
itemBuilder: (context, index) {
String category = appController
.listOfDevicesCategory[index];
return CategoryListItem(
isSelected: selectedCategory == category,
category: category,
);
}),
),
ListView.builder(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: 25,
itemBuilder: (BuildContext context, int index) {
return ListTile(title: Text('Item $index'));
},
),
],
),
),
);
},
),
)
],
),
floatingActionButton: Container(
margin: const EdgeInsets.only(bottom: 16),
child: const ChiscoSpeedDial()),
floatingActionButtonLocation:
FloatingActionButtonLocation.startDocked,
),
),
);
}
}

I think it is better to use bottom from SliverAppBar. Run below widget to see the result
class DAX extends StatefulWidget {
DAX({Key? key}) : super(key: key);
#override
State<DAX> createState() => _DAXState();
}
class _DAXState extends State<DAX> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: CustomScrollView(
slivers: [
SliverAppBar(
expandedHeight: 200,
pinned: true,
backgroundColor: Colors.blue,
elevation: 0,
bottom: PreferredSize(
preferredSize: Size.fromHeight(60),
child: ColoredBox(
color: Colors.blue,
child: Container(
clipBehavior: Clip.hardEdge,
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(12),
topRight: Radius.circular(12),
),
color: Colors.white,
),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: List.generate(
12,
(index) => Chip(
label: Text("chip $index"),
),
),
),
),
),
)),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => Container(
alignment: Alignment.center,
height: 100,
child: Text("$index"),
),
),
),
],
),
),
);
}
}

DraggableScrollableSheet doesn't expand/collapse in Flutter

I'm building an app in flutter and I finally got the app to run, but for some reason, the DraggableScrollableSheet doesn't expand nor collapse.
I added a SingleChildScrollView, but it only makes whatever is inside the sheet scrollable but the sheet itself is basically "frozen".
Solutions I tried:
Using a ScrollView but it also didn't work as expected.
Removing the Expanded widget but I get a constraints error.
My code:
Sacffold(
///....
body: column (
children: [
SizedBox(
height: 128,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 0, 5),
child: Text(
//...
),
),
Text(
//...
),
],
),
),
Expanded(
child: DraggableScrollableSheet(
initialChildSize: 0.6,
minChildSize: 0.2,
maxChildSize: 1.0,
builder: (context, scrollController) {
return Expanded(
child: SingleChildScrollView(
controller: scrollController,
child: Container(
decoration: const BoxDecoration(
//...
),
child: Column(
children: [
Container(
height: 82,
decoration: const BoxDecoration(
//...
),
child: Row(
children: [
Expanded(
flex: 1,
child:
Padding(
padding: const EdgeInsets.fromLTRB(
0, 10, 0, 15),
child: Column(
children: [
Center(
child: Padding(
padding: const EdgeInsets.all(5),
child: Text(
//...
),
),
),
Text(
//...
),
],
),
),
),
Expanded(
flex: 1,
child: Padding(
padding: const EdgeInsets.fromLTRB(
0, 10, 0, 15),
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(5),
child: Text(
//...
),
),
Text(
//...
),
],
),
),
),
],
),
),
Container(
//...
),
],
),
),
),
);
},
),
),
],
)

I was trying to run the app on windows, but after doing a lot of research and testing, I found out the DraggableScrollableSheet doesn't work on windows, it only works on android/ios. I ran the app on an android emulator and it worked perfectly fine.

Run the ontap() gesture on the card in flutter

I have been trying to run the onTap() function from material package of flutter but it seems to throw me this error:
"The following assertion was thrown while handling a gesture:
Navigator operation requested with a context that does not include a Navigator."
I am in need of running this function to reach out to the called function of new screen in the application.
The code is below:
class _HomePageState extends State<dashboardpage> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Stack(
children: <Widget>[
Container(
height:130*.99,
decoration: BoxDecoration(
image: DecorationImage(
alignment: Alignment.center,
image: AssetImage('assets/bismillah.png'),fit: BoxFit.fitHeight,
)
),
),
SafeArea(
child: Padding(
padding: EdgeInsets.only(top: 0),
child: Column(
children:<Widget> [
Container(
height: 100.0,
child: Row(
children:<Widget> [
Center(
child: SizedBox(
width: 90.0,
),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end
)
],
),
),
Expanded(
child:GridView.count(
mainAxisSpacing: 10,
crossAxisSpacing: 10,
primary: false,
crossAxisCount: 2,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 60),
child: InkWell(
child: Card(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset('assets/images/kafiroun/kafirun.jpg',height: 80),
Text('सूरा अल काफिरून',style: TextStyle(fontWeight: FontWeight.bold,color: Colors.black87))
]
),
),
shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)
),
elevation: 5.0,
),
onTap:(){
Navigator.push(context, MaterialPageRoute(builder: (context)=> kafiroun()));
},
)
),
),
),
)
]
);
}
}
This is the code specimen and the code is stuck on onTap() line.
Please help me!

Use GestureDetector
GestureDetector(onTap:(){
Navigator.push(context, MaterialPageRoute(builder: (context)=> kafiroun()));
},
child: Padding(
padding: const EdgeInsets.only(top: 60),
child: InkWell(
child: Card(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset('assets/images/kafiroun/kafirun.jpg',height: 80),
Text('सूरा अल काफिरून',style: TextStyle(fontWeight: FontWeight.bold,color: Colors.black87))
]
),
),
shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)
),
elevation: 5.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,
),
),
),
],
)),
),
]);
}
}

How can I obtain this UI result?

I was trying to recreate a design concept from this guy(https://dribbble.com/shots/3812962-iPhone-X-Todo-Concept) but I'm getting some troubles with the ListView alignment or so I think.
What I'm trying to do is moving the List to the right without cutting the edges of the cards when I swipe.
I already tried with margin and padding but none of this applied to the container produces the results I want to obtain.Edges are cutted off when I swipe.
I leave here the Container with the ListView inside it.
Screenshoots of the actual app:
https://imgur.com/a/hJ96sEv
Container(
height: 350.0,
child: ListView.builder(
physics: NeverScrollableScrollPhysics(),
itemCount: 3,
controller: scrollController,
scrollDirection: Axis.horizontal,
itemBuilder: (context, position) {
return GestureDetector(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: Container(
width: 250.0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(
cardsList[position].icon,
color: appColors[position],
),
Icon(
Icons.more_vert,
color: Colors.grey,
)
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 8.0, vertical: 4.0),
child: Text(
"${cardsList[position].tasksRemaining} Tasks",
style:
TextStyle(color: Colors.grey),
),
),
Padding(
padding:
const EdgeInsets.symmetric(
horizontal: 8.0,
vertical: 4.0),
child: Text(
"${cardsList[position].cardTitle}",
style:
TextStyle(fontSize: 28.0),
)),
Padding(
padding: const EdgeInsets.all(8.0),
child: LinearProgressIndicator(
value: cardsList[position]
.taskCompletion,
),
)
],
),
),
],
),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
),
),
onHorizontalDragEnd: (details) {
animationController = AnimationController(
vsync: this,
duration: Duration(milliseconds: 450));
curvedAnimation = CurvedAnimation(
parent: animationController,
curve: Curves.fastOutSlowIn);
animationController.addListener(() {
setState(() {
currentColor =
colorTween.evaluate(curvedAnimation);
});
});
if (details.velocity.pixelsPerSecond.dx > 0) {
if (cardIndex > 0) {
cardIndex--;
colorTween = ColorTween(
begin: currentColor,
end: appColors[cardIndex]);
}
} else {
if (cardIndex < 2) {
cardIndex++;
colorTween = ColorTween(
begin: currentColor,
end: appColors[cardIndex]);
}
}
setState(() {
scrollController.animateTo((cardIndex) * 256.0,
duration: Duration(milliseconds: 450),
curve: Curves.fastOutSlowIn);
});
colorTween.animate(curvedAnimation);
animationController.forward();
});
},
),
),
What I'm trying to do is moving the List to the right without cutting the edges of the cards when I swipe.

To achieve that goal you need a PageView instead of a ListView, that way you can swipe and "snap" the views when you reach and specific position:
PageView.builder(
itemCount: tasks.length,
controller: PageController(initialPage: 0, viewportFraction: 0.8),
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 10),
child: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Color(0x40000000),
blurRadius: 10,
offset: Offset(0, 12),
),
],
),
child: Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10),
),
color: Colors.white,
child: Padding(
padding: const EdgeInsets.all(15),
child: Column(
children: <Widget>[
IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Icon(tasks[index].icon),
Expanded(
child: Container(
child: Align(
alignment: Alignment.topRight,
child: Icon(Icons.menu),
),
),
),
],
),
),
Expanded(
child: Container(
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text(
"${tasks[index].tasks} tasks",
style: TextStyle(
color: Color(0xD0000000),
fontSize: 15,
),
),
SizedBox(height: 10),
Text(
"${tasks[index].title}",
style: TextStyle(
color: Color(0xD0000000),
fontSize: 24,
),
),
SizedBox(height: 10),
LinearProgressIndicator(
value: tasks[index].percentage,
backgroundColor: Color(0x300000FF),
)
],
),
),
),
],
),
),
),
),
);
},
)
The result of this implementation is something like this:
If you want to change the offset of the cards, you need to modify the value viewportFraction: 0.8 to anything you'd like. 1.0 is the value without offset.
You can find my full implementation over this Gist Github