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.
Related
I am learning flutter right now and my SinglePageScrollView is not working, Please help me out, I am trying to solve it since 10 hours, I am just brewww right now.
This is my code btw
SingleChildScrollView(
child: Container(
child: Column(
children: [
Column(
children: [
Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
child: Image.asset("assets/images/img.jpg"),
),
Container(
margin: const EdgeInsets.only(top: 5),
alignment: Alignment.center,
width: MediaQuery.of(context).size.width,
child: const Text(
"Hii, This is what i probably uploaded",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
Divider(color: Colors.black)
],
)
],
),
Column(
children: [
Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
child: Image.asset("assets/images/img.jpg"),
),
Container(
margin: const EdgeInsets.only(top: 5),
alignment: Alignment.center,
width: MediaQuery.of(context).size.width,
child: const Text(
"Hii, This is what i probably uploaded",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
Divider(color: Colors.black)
],
)
],
),
],
),
),
)
Btw, SingleChildScrollView is the child of Row widget
Your code is working perfectly, it has only one small mistake,
SingleChildScrollview always need some height means in how much area we want scroll our child widgets.
You’ve 2 widgets in your Column
Row
SingleChildScrollview
You want to scroll your child widgets in Column except Row area, so wrap it within Expanded
Expanded(
child: SingleChildScrollView(
….
Row must have children or you have an unclosed parenthesis in the container.
return Scaffold(
appBar: AppBar(),
body: Column(
children: [
Row(
children: [
SingleChildScrollView(
child: Container(),
)
],
)
],
),
);
return Scaffold(
appBar: AppBar(),
body: Column(
children: [
Row(),
SingleChildScrollView(
child: Container(),
),
],
),
);
I am trying to make ListView for my app. when I add listview, listview is not visible or showing.
INFO
Flutter version: 3.3.8
Engine revision 857bd6b74c
Dart version 2.18.4
DevTools version 2.15.0
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[100],
body: Container(
padding: const EdgeInsets.only(left: 20, top: 50),
child: Column(
children: <Widget>[
Container(
padding: const EdgeInsets.all(0),
child: Column(
children: [
Expanded(
child: ListView(
shrinkWrap: true,
children: <Widget>[
Expanded(
child: Column(
children: [
Container(
decoration: BoxDecoration(
image: const DecorationImage(
image: NetworkImage("..."),
),
borderRadius: BorderRadius.circular(20.0)
),
),
const Text("Pineapple")
],
),
)
],
),
)
],
),
)
],
)
)
);
}
Please remove unnecessary widgets like Expanded(), Column(), etc. You don't need to use those widgets cause you use ListView(), ListView() itself takes multiple children. So you won't need to use Column() or Expanded() inside of ListView(). Here is the full solution
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.grey[100],
body: Container(
padding: const EdgeInsets.only(left: 20, top: 50),
child: Column(
children: <Widget>[
Container(
padding: const EdgeInsets.all(0),
child: Column(
children: [
ListView(
shrinkWrap: true,
children: <Widget>[
Container(
height: 200,
decoration: BoxDecoration(
image: const DecorationImage(
image: NetworkImage(
"https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/640px-Image_created_with_a_mobile_phone.png"),
),
borderRadius: BorderRadius.circular(20.0)),
),
const Text("Pineapple")
],
)
],
),
)
],
),
),
),
);
}
Add property "primary: false"
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[100],
body: Container(
padding: const EdgeInsets.only(left: 20, top: 50),
child: Column(
children: [
Container(
padding: const EdgeInsets.all(0),
child: Column(
children: [
Expanded(
child: ListView(
shrinkWrap: true,
primary:false,
children: [
Expanded(
child: Column(
children: [
Container(
decoration: BoxDecoration(
image: const DecorationImage(
image: NetworkImage("..."),
),
borderRadius: BorderRadius.circular(20.0)
),
),
const Text("Pineapple")
],
),
)
],
),
)
],
),
)
],
)
)
);
}
Just Remove Expand() Widget
return Scaffold(
backgroundColor: Colors.grey[100],
body: Container(
padding: const EdgeInsets.only(left: 20, top: 50),
child: Column(
children: [
Container(
padding: const EdgeInsets.all(0),
child: Column(
children: [
ListView(
shrinkWrap: true,
primary: false,
children: [
Column(
children: [
Container(
decoration: BoxDecoration(
image: const DecorationImage(
image: NetworkImage("..."),
),
borderRadius: BorderRadius.circular(20.0)),
),
const Text("Pineapple")
],
)
],
)
],
),
)
],
)));
Remove Expanded Widgets
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[100],
body: Container(
padding: const EdgeInsets.only(left: 20, top: 50),
child: Column(
children: [
Container(
padding: const EdgeInsets.all(0),
child: Column(
children: [
ListView(
shrinkWrap: true,
primary:false,
children: [
Column(
children: [
Container(
decoration: BoxDecoration(
image: const DecorationImage( image: NetworkImage("..."), ),
borderRadius: BorderRadius.circular(20.0)
),
),
const Text("Pineapple")
],
)
],
)
],
),
)
],
)
)
);
}
I'm trying to create elevated buttons that have equations on them. Here's the stripped down code that I have thus far:
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
const Padding(padding: EdgeInsets.all(10)),
Flexible(
fit: FlexFit.tight,
flex: 10,
child: ElevatedButton(
style: getOptionButtonStyle(0),
onPressed: () =>
{debugPrint("${context.size}"), updateSelection(1)},
child: TeXView(
renderingEngine: TeXViewRenderingEngine.katex(),
child: TeXViewDocument(
r"""$$0$$""",
style: TeXViewStyle(
textAlign: TeXViewTextAlign.center,
fontStyle: TeXViewFontStyle(
fontSize: 10, sizeUnit: TeXViewSizeUnit.pt),
),
),
),
),
),
const Padding(padding: EdgeInsets.all(10)),
Flexible(
fit: FlexFit.tight,
flex: 10,
child: ElevatedButton(
style: getOptionButtonStyle(1),
onPressed: () =>
{debugPrint("${context.size}"), updateSelection(3)},
child: TeXView(
renderingEngine: TeXViewRenderingEngine.katex(),
child: TeXViewDocument(r"""$$1$$""",
style: TeXViewStyle(
textAlign: TeXViewTextAlign.center,
fontStyle: TeXViewFontStyle(
fontSize: 10, sizeUnit: TeXViewSizeUnit.pt),
),
),
),
),
),
const Padding(padding: EdgeInsets.all(10)),
],
),
Unfortunately, this only displays the second button properly, the first has some squiggles that are almost invisible on the right:
I've tried changing the rendering engine to mathjax, added and removed padding and margins in the style, but no luck.
Any idea what is going on, and how to fix it?
Thanks!
Update: it turns out that this behaviour is when I run it on chrome (web). Running on my phone renders perfectly! So: what settings could be affecting this?
Prefrable and less complex
=> By Using GetX Package
1st method
Scaffold(
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: Get.width,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: Get.width*0.45,
height: 50,
child: ElevatedButton(onPressed: () {}, child: Text("1"))),
Container(
height: 50,
width: Get.width*0.45,
child: ElevatedButton(onPressed: () {}, child: Text("2"))),
],
),
),
));
=> By using Media Query
second method
class Test1 extends StatelessWidget {
var size,height,width;
Test1({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
size = MediaQuery.of(context).size;
height = size.height;
width = size.width;
return Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: width,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: width*0.45,
height: 50,
child: ElevatedButton(onPressed: () {}, child: Text("1"))),
Container(
height: 50,
width: width*0.45,
child: ElevatedButton(onPressed: () {}, child: Text("2"))),
],
),
),
),
));
}
}
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,
),
)
),
)
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