How do I bring the button closer to the Flutter - flutter

as you can see in the picture, there is a huge gap between the first button, the number and the second button. I tried using and not using containers, I switched between body: Center and Listview. I pretty much want the arrows to be directly above and below the number.
body: ListView(
children: <Widget>[
Container(
width: 350,
height: 36,
child: Row(children: <Widget>[
Text(
"ATH: " + highScore.toString(),
textAlign: TextAlign.right,
style: TextStyle(
fontSize: 30, color: Color.fromRGBO(0, 136, 255, 70)),
),
Spacer(),
Text(
Score.toString(),
textAlign: TextAlign.right,
style: TextStyle(
fontSize: 30, color: Color.fromRGBO(0, 136, 255, 70)),
)
]),
),
IconButton(
onPressed: PfeilHoch,
alignment: Alignment.bottomCenter,
icon: Icon(Icons.arrow_drop_up),
iconSize: 350,
color: Color.fromRGBO(0, 300, 0, 100),
padding: EdgeInsets.all(0),
),
Text(
(randomNumber.toString()),
textAlign: TextAlign.center,
style: TextStyle(fontSize: 90, ),
),
IconButton(
alignment: Alignment.topCenter,
onPressed: PfeilRunter,
icon: Icon(Icons.arrow_drop_down),
iconSize: 350,
color: Color.fromRGBO(300, 0, 0, 100),
padding: EdgeInsets.all(0),
),
],
)
How it's looking right now


Instead of Listview use Column with SingleScrollChild

Related

Make CircularPercentIndicator overflow into Text

I have a CircularPercentIndicator with a Text under it.
It looks like this
I want the CircularPercentIndicator to overlap into Area 1, how do I do this?
My code
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircularPercentIndicator(
radius: 20.0,
lineWidth: 2.0,
percent: 0.10,
center: Text(
"10%",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
),
),
progressColor: Colors.red,
),
// Padding(
// padding:
// EdgeInsets.symmetric(horizontal: 10.0),
// child: Text("Area 1"),
// ),
Padding(
padding: EdgeInsets.only(),
child: Text(
"Area 1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.grey[400],
backgroundColor: Colors.black),
),
)
],
),

using a Stack
Stack(
children: <Widget>[
Padding(
padding: EdgeInsets.only(bottom: 12),
child: Container(
//The Container here to fill the CircularPercentIndicator with color grey, tried using "fillColor" property and it filled it as a square
decoration: BoxDecoration(borderRadius: BorderRadius.circular(35),color: Colors.grey),
child: CircularPercentIndicator(
backgroundColor: Colors.black,
radius: 35.0,
lineWidth: 2.0,
percent: 0.10,
center: Text(
"10%",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
),
),
// progressColor: Colors.red,
),
),
),
Positioned(
bottom: 1,
child: Container(
color: Colors.black,
//Width is as twice as radious(Dia of the indicator) as in example image
width: 70,
height: 30,
child: Center(
child: Text(
"Area 1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.grey[400],
),
),
),
),
),
],
),

How to set a image inside a container but also expand outside the container in flutter

I tried to code this all the way I can, but It's still can't move .
I tried to wrap this all in stack and I put the picture as second child, even if i adjust the container width, the image can't get out of the card, and the card padding is stuck there, I can't change anything, how do i fix that
here is the example design
here is my code
children: [
SizedBox(height: 37),
const Text("Hey Mishal,",
style: TextStyle(
fontSize: 26,
color: Color(0xFF0D1333),
fontWeight: FontWeight.bold,
)),
const Text("Find a course you want to learn",
style: TextStyle(
fontSize: 20,
color: Color(0xFF61688B),
height: 2,
)),
Container(
height: 150,
width: 357,
alignment: Alignment.topLeft,
margin: const EdgeInsets.symmetric(vertical: 30),
decoration: BoxDecoration(
color: kDeepBlueTheme,
borderRadius: BorderRadius.circular(15)),
child: Stack(
children: [
Card(
color: Colors.blueAccent,
child: Padding(
padding: const EdgeInsets.only(left: 15, top: 23),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// SizedBox(height: 30, width: 100,),
const Text('50% off',
style: TextStyle(
color: Colors.white,
fontSize: 27,
fontWeight: FontWeight.bold)),
const SizedBox(
height: 5,
),
const Text('For Any Courses',
style: TextStyle(
letterSpacing: 2,
color: Colors.white,
fontSize: 17,
fontWeight: FontWeight.w300)),
const SizedBox(
height: 6,
),
ElevatedButton(
//on pressed
onPressed: () async {},
//text to shoe in to the button
child: const Text('Join Now!',
style: TextStyle(color: kMainTheme)),
//style section code here
style: ButtonStyle(
elevation:
MaterialStateProperty.all<double>(0),
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
)),
backgroundColor:
MaterialStateProperty.all<Color>(
Colors.black),
),
),
]),
),
),
Positioned(
bottom: 1,
left: 100,
child: Image.asset(
'assets/person_home.png',
height: 230,
),
)
],
),
),
],
and here is my result ,
how can I achieve that ?

Wrap your Stack with a SizedBox and give it a height greater than the height of Card, use media query heights to make it responsive.
SizedBox(
height: 220,
child: Stack(
alignment: Alignment.bottomCenter,
children: [
Container(
height: 200,
width: double.infinity,
padding: const EdgeInsets.all(8.0),
child: Card(
color: Colors.blueAccent,
child: Padding(
padding: const EdgeInsets.all(12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text('50% off',
style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.bold)),
const SizedBox(
height: 5,
),
const Text('For Any Courses',
style: TextStyle(
letterSpacing: 2,
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.w300)),
const SizedBox(
height: 6,
),
ElevatedButton(
//on pressed
onPressed: () async {},
//text to shoe in to the button
child: const Text('Join Now!',
style: TextStyle(color: Colors.white)),
//style section code here
style: ButtonStyle(
elevation: MaterialStateProperty.all<double>(0),
shape:
MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
)),
backgroundColor:
MaterialStateProperty.all<Color>(Colors.black),
),
),
]),
),
),
),
Positioned(
right: 0,
top: 0,
child: Image.network(
'https://i.ibb.co/7Kr3Vc2/Screenshot-2022-02-23-at-6-11-05-PM-removebg-preview.png',
fit: BoxFit.cover,
height: 210,
),
)
],
),
),

Try This Result Will be like in pic..
Stack(
children: [
Align(
alignment: Alignment.bottomCenter,
child: Container(
height: 400,
alignment: Alignment.bottomCenter,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.blueGrey,
),
),
),
Row(
children: [
const Padding(
padding:EdgeInsets.only(left: 20,right: 5),
child: Text('hello'),
),
Spacer(),
SizedBox(
height: 700,
child: Image.asset('assets/images/place_holder_avatar.png',fit: BoxFit.cover,),
),
],
),
],
)

Expanded widget takes full height of the screen irrespective of its children

I am using a dynamic bottom sheet with a column as its child. The last child of this column is a grid view. For some small screen devices, the content of this bottom sheet my get overflow so I wrapped the grid view inside an expanded widget. Now its content are scrollable if they are overflowing.
But the problem here is, even if the contents of the grid view are not overflowing (screen size is big enough) it still expands to full screen leaving empty space at the bottom. I am trying to solve this issue for past 3 days but no result. I tried various combinations of parent and child widget but nothing gives the satisfying result.
The result I am expecting is that the grid view should scroll when contents are overflowing and if not then it should take only the required space and not the entire screen.
Here is my entire code, the grid view with the problem is at the end :
showModalBottomSheet<dynamic>(
isScrollControlled: true,
context: context,
builder: (BuildContext context) {
return StatefulBuilder(
builder: (context, setState) {
return Container(
color: Colors.white,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: double.infinity,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: Color.fromARGB(255, 225, 225, 225)),
),
//color: Color.fromARGB(255, 255, 255, 255),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(15, 15, 10, 15),
child: Icon(
Icons.save,
color: Color.fromARGB(255, 2, 136, 209),
size: 28.0,
),
),
Expanded(
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: (){},
child: Padding(
padding: const EdgeInsets.fromLTRB(8.0, 13.0, 10.0, 10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
constraints: BoxConstraints(minWidth: 0, maxWidth: MediaQuery.of(context).size.width*(2/3)),
child: Text(
'PDF Name',
overflow: TextOverflow.ellipsis,
maxLines: 2,
softWrap: true,
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Color.fromARGB(255, 117, 117, 117),
),
),
),
Padding(
padding: EdgeInsets.fromLTRB(5.0, 0.0, 0.0, 0.0),
child: Icon(
Icons.edit,
color: Color.fromARGB(255, 2, 136, 209),
size: 16.0,
),
),
],
),
Padding(
padding: const EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 0.0),
child: Text(
"PDF Size",
style: TextStyle(
fontSize: 12.0,
color: Color.fromARGB(255, 117, 117, 117),
),
),
),
],
),
),
),
),
),
],
),
),
Row(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 4),
child: Divider(
color: Color.fromARGB(255, 220, 220, 220),
thickness: 1.1,
),
)
),
Padding(
padding: const EdgeInsets.fromLTRB(10, 10, 10, 4),
child: Text(
"Share/Save File to",
style: TextStyle(
color: Color.fromARGB(255, 117, 117, 117),
fontSize: 15.0,
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 4),
child: Divider(
color: Color.fromARGB(255, 220, 220, 220),
thickness: 1.1,
),
)
),
]
),
Expanded(
child: GridView.count(
padding: EdgeInsets.fromLTRB(0, 0, 0, 15),
crossAxisCount: 3,
shrinkWrap: true,
childAspectRatio: 1.25,
children: <Widget>[
FileSaveCard(icon: Icons.phone_android, color: Colors.pink, title: 'Internal Storage', press: (){}),
FileSaveCard(icon: Icons.folder, color: Colors.blueAccent, title: 'My Documents', press: (){}),
FileSaveCard(icon: Icons.add_to_drive_rounded, color: Color.fromARGB(255, 254, 150, 0), title: 'Google Drive', press: (){}),
FileSaveCard(icon: Icons.mail, color: Colors.lightBlue, title: 'Send to Email', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
],
),
),
],
),
);
}
);
},
);
Here is the output image:
It even slides under that phone's status bar at the top. How can I avoid that as well.
This is the result I am expecting:
Case 1: When it is overflowing, this works fine as I have wrapped grid view in an expanded widget, it becomes scrollable -
Case 2: When screen size is sufficient for the children, below image should be the output, but I get empty space at bottom instead-
Okay, I figured it out finally. For the Status Bar overlapping part giving safe area and all was not working and as suggested by Sagar Acharya using FractionallySizedBox did prevented it but it forced the bottom sheet to take up full screen irrespective of its content height leaving empty space after its last item. Instead I used constraints: BoxConstraints(maxHeight: (MediaQuery.of(context).size.height)*0.95) which did not force sheet to take full height and also prevented it from overlapping status bar.
For the other problem I first removed expanded from top of my grid view and wrapped my whole column (containing all items of the bottom sheet) with SingleChildScrollView. Now it keeps the content wrapped until sheet reaches full screen height and when it does it becomes scrollable.
But still there is one thing I want to change, in my output my whole content of the bottom sheet is scrollable but I just want the grid view children to be scrollable, the top most 'PDF Name' and 'Share/Save File to' should not scroll along with it. Any ideas how I can do that. I tried using SingleChildScrollView on grid view instead of Column but it did not work (the element overflowed when the sheet reached full height)
Here is my code:
showModalBottomSheet<dynamic>(
isScrollControlled: true,
context: context,
builder: (BuildContext context) {
return StatefulBuilder(
builder: (context, setState) {
return Container(
//height: 900,
constraints: BoxConstraints(maxHeight: (MediaQuery.of(context).size.height)*0.95),
color: Colors.white,
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: double.infinity,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: Color.fromARGB(255, 225, 225, 225)),
),
//color: Color.fromARGB(255, 255, 255, 255),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(15, 15, 10, 15),
child: Icon(
Icons.save,
color: Color.fromARGB(255, 2, 136, 209),
size: 28.0,
),
),
Expanded(
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: (){},
child: Padding(
padding: const EdgeInsets.fromLTRB(8.0, 13.0, 10.0, 10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
constraints: BoxConstraints(minWidth: 0, maxWidth: MediaQuery.of(context).size.width*(2/3)),
child: Text(
'PDF Name',
overflow: TextOverflow.ellipsis,
maxLines: 2,
softWrap: true,
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Color.fromARGB(255, 117, 117, 117),
),
),
),
Padding(
padding: EdgeInsets.fromLTRB(5.0, 0.0, 0.0, 0.0),
child: Icon(
Icons.edit,
color: Color.fromARGB(255, 2, 136, 209),
size: 16.0,
),
),
],
),
Padding(
padding: const EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 0.0),
child: Text(
"PDF Size",
style: TextStyle(
fontSize: 12.0,
color: Color.fromARGB(255, 117, 117, 117),
),
),
),
],
),
),
),
),
),
],
),
),
Row(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 4),
child: Divider(
color: Color.fromARGB(255, 220, 220, 220),
thickness: 1.1,
),
)
),
Padding(
padding: const EdgeInsets.fromLTRB(10, 10, 10, 4),
child: Text(
"Share/Save File to",
style: TextStyle(
color: Color.fromARGB(255, 117, 117, 117),
fontSize: 15.0,
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 4),
child: Divider(
color: Color.fromARGB(255, 220, 220, 220),
thickness: 1.1,
),
)
),
]
),
GridView.count(
padding: EdgeInsets.fromLTRB(0, 0, 0, 15),
crossAxisCount: 3,
shrinkWrap: true,
//physics: NeverScrollableScrollPhysics(),
physics: const ScrollPhysics(),
childAspectRatio: 1.25,
children: <Widget>[
FileSaveCard(icon: Icons.phone_android, color: Colors.pink, title: 'Internal Storage', press: (){}),
FileSaveCard(icon: Icons.folder, color: Colors.blueAccent, title: 'My Documents', press: (){}),
FileSaveCard(icon: Icons.add_to_drive_rounded, color: Color.fromARGB(255, 254, 150, 0), title: 'Google Drive', press: (){}),
FileSaveCard(icon: Icons.mail, color: Colors.lightBlue, title: 'Send to Email', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
/*FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),*/
],
),
],
),
),
);
}
);
},
);
Any help would me much appreciated.
Thank you.

I think this is the answer you wanted
import 'package:flutter/material.dart';
import 'package:test11111/test1.dart';
import 'package:get/get.dart';
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Center(
child: ElevatedButton(
child: const Text('showModalBottomSheet'),
onPressed: () {
showModalBottomSheet<void>(
context: context,
builder: (BuildContext context) {
return SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: Get.height* 0.4,
color: Colors.white,
child: Column(
children: [
Container(
width: double.infinity,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: Color.fromARGB(255, 225, 225, 225)),
),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(15, 15, 10, 15),
child: Icon(
Icons.save,
color: Color.fromARGB(255, 2, 136, 209),
size: 28.0,
),
),
Expanded(
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: (){},
child: Padding(
padding: const EdgeInsets.fromLTRB(8.0, 13.0, 10.0, 10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
constraints: BoxConstraints(minWidth: 0, maxWidth: MediaQuery.of(context).size.width*(2/3)),
child: Text(
'PDF Name',
overflow: TextOverflow.ellipsis,
maxLines: 2,
softWrap: true,
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Color.fromARGB(255, 117, 117, 117),
),
),
),
Padding(
padding: EdgeInsets.fromLTRB(5.0, 0.0, 0.0, 0.0),
child: Icon(
Icons.edit,
color: Color.fromARGB(255, 2, 136, 209),
size: 16.0,
),
),
],
),
Padding(
padding: const EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 0.0),
child: Text(
"PDF Size",
style: TextStyle(
fontSize: 12.0,
color: Color.fromARGB(255, 117, 117, 117),
),
),
),
],
),
),
),
),
),
],
),
),
Row(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 4),
child: Divider(
color: Color.fromARGB(255, 220, 220, 220),
thickness: 1.1,
),
)
),
Padding(
padding: const EdgeInsets.fromLTRB(10, 10, 10, 4),
child: Text(
"Share/Save File to",
style: TextStyle(
color: Color.fromARGB(255, 117, 117, 117),
fontSize: 15.0,
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 4),
child: Divider(
color: Color.fromARGB(255, 220, 220, 220),
thickness: 1.1,
),
)
),
]
),
Expanded(
child: GridView.count(
padding: EdgeInsets.fromLTRB(0, 0, 0, 15),
crossAxisCount: 3,
shrinkWrap: true,
childAspectRatio: 1.25,
children: <Widget>[
FileSaveCard(icon: Icons.phone_android, color: Colors.pink, title: 'Internal Storage', press: (){}),
FileSaveCard(icon: Icons.folder, color: Colors.blueAccent, title: 'My Documents', press: (){}),
FileSaveCard(icon: Icons.add_to_drive_rounded, color: Color.fromARGB(255, 254, 150, 0), title: 'Google Drive', press: (){}),
FileSaveCard(icon: Icons.mail, color: Colors.lightBlue, title: 'Send to Email', press: (){}),
FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
],
),
),
],
),
),
],
),
);
},
);
},
),
);
}
}
class FileSaveCard extends StatelessWidget {
FileSaveCard(
{Key? key,
required this.icon,
required this.color,
required this.title,
required this.press})
: super(key: key);
IconData icon;
Color color;
String title;
VoidCallback press;
#override
Widget build(BuildContext context) {
return Container(
child: Column(
children: [
IconButton(icon: Icon(icon), color: color, onPressed: press),
Text(title)
],
),
);
}
}

Ok So from the code i see you are using things in wrong manner.
If you are using the isScrollControlled =true it will use the complete height of the device as you have used the expanded and the Column widget as a parent for the children inside it.
Next if you do not want the complete height so instead of column you have to use the Wrap widget and remove the expanded from the gridview it will take the height as per the children.
If you want the fill modelsheet and the space from top as it overlaps the statusbar you can use the FractionallySizedBox widget
FractionallySizedBox(
heightFactor: 0.95,// This will take 0.05 percent height from the top and show the status bar
)
Note: It can only be used when the isScrolled is true.
so I have created the example from the code that you have provided, Also i have added my icon set so change it as per your needs.
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(home: MyApp()));
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final items = <Widget>[
//1
const Icon(
Icons.phone_android,
color: Colors.pink,
semanticLabel: 'Internal Storage',
),
//2
const Icon(
Icons.phone_android,
color: Colors.pink,
semanticLabel: 'Internal Storage',
),
//3
const Icon(
Icons.phone_android,
color: Colors.pink,
semanticLabel: 'Internal Storage',
),
//4
const Icon(
Icons.phone_android,
color: Colors.pink,
semanticLabel: 'Internal Storage',
),
//5
const Icon(
Icons.phone_android,
color: Colors.pink,
semanticLabel: 'Internal Storage',
),
//6
const Icon(
Icons.phone_android,
color: Colors.pink,
semanticLabel: 'Internal Storage',
),
//Add the same item below this to make it full screen and items below 7 will have the minimum model sheet height.
//7
// const Icon(
// Icons.phone_android,
// color: Colors.pink,
// semanticLabel: 'Internal Storage',
// ),
//
// FileSaveCard(icon: Icons.folder, color: Colors.blueAccent, title: 'My Documents', press: (){}),
// FileSaveCard(icon: Icons.add_to_drive_rounded, color: Color.fromARGB(255, 254, 150, 0), title: 'Google Drive', press: (){}),
// FileSaveCard(icon: Icons.mail, color: Colors.lightBlue, title: 'Send to Email', press: (){}),
// FileSaveCard(icon: Icons.share, color: Colors.green, title: 'Share', press: (){}),
];
#override
Widget build(BuildContext context) {
return SafeArea(
top: true,
child: Scaffold(
body: ElevatedButton(
onPressed: () {
showModalBottomSheet<dynamic>(
// use only when you want to use the full height of the screen.
isScrollControlled: items.length > 6 ? true : false,
context: context,
builder: (BuildContext context) {
return StatefulBuilder(builder: (context, setState) {
return FractionallySizedBox(
heightFactor: items.length > 6
? 0.95
: null, // This widget will add padding from top showing the status bar
child: Container(
color: Colors.white,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: double.infinity,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Color.fromARGB(255, 225, 225, 225)),
),
//color: Color.fromARGB(255, 255, 255, 255),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding:
const EdgeInsets.fromLTRB(15, 15, 10, 15),
child: Icon(
Icons.save,
color: Color.fromARGB(255, 2, 136, 209),
size: 28.0,
),
),
Expanded(
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: () {},
child: Padding(
padding: const EdgeInsets.fromLTRB(
8.0, 13.0, 10.0, 10.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Container(
constraints: BoxConstraints(
minWidth: 0,
maxWidth:
MediaQuery.of(context)
.size
.width *
(2 / 3)),
child: Text(
'PDF Name',
overflow:
TextOverflow.ellipsis,
maxLines: 2,
softWrap: true,
style: TextStyle(
fontSize: 16.0,
fontWeight:
FontWeight.bold,
color: Color.fromARGB(
255, 117, 117, 117),
),
),
),
Padding(
padding: EdgeInsets.fromLTRB(
5.0, 0.0, 0.0, 0.0),
child: Icon(
Icons.edit,
color: Color.fromARGB(
255, 2, 136, 209),
size: 16.0,
),
),
],
),
Padding(
padding:
const EdgeInsets.fromLTRB(
0.0, 5.0, 0.0, 0.0),
child: Text(
"PDF Size",
style: TextStyle(
fontSize: 12.0,
color: Color.fromARGB(
255, 117, 117, 117),
),
),
),
],
),
),
),
),
),
],
),
),
Row(children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 4),
child: Divider(
color: Color.fromARGB(255, 220, 220, 220),
thickness: 1.1,
),
)),
Padding(
padding: const EdgeInsets.fromLTRB(10, 10, 10, 4),
child: Text(
"Share/Save File to",
style: TextStyle(
color: Color.fromARGB(255, 117, 117, 117),
fontSize: 15.0,
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 4),
child: Divider(
color: Color.fromARGB(255, 220, 220, 220),
thickness: 1.1,
),
)),
]),
Expanded(
flex: items.length > 6 ? 1 : 0,
child: GridView.count(
padding: EdgeInsets.fromLTRB(0, 0, 0, 15),
crossAxisCount: 3,
shrinkWrap: true,
childAspectRatio: 1.25,
physics: const ScrollPhysics(),
children: items),
),
],
),
),
);
});
},
);
},
child: const Text("Press"),
),
),
);
}
}
Run the application and let me know if that works for you.

Flutter: Functions with Argument in Raised Button

I am trying to pass parameters to Function on Raised Button click. I am using ListView Builder and Raised Button.
Widget buildList(BuildContext context, int index) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
color: Colors.white,
),
width: double.infinity,
height: 100,
margin: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 70,
height: 70,
margin: EdgeInsets.only(top:5, right: 5, bottom: 5),
child: CircleAvatar(
radius: 50,
backgroundColor: Color(0xff476cfb),
child: ClipOval(
child: Image.network(
lists[index].profilePhoto,
fit: BoxFit.fill,
),
),
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
lists[index].name,
style: TextStyle(
color: primary,
fontWeight: FontWeight.bold,
fontSize: 18),
),
SizedBox(
height: 6,
),
Row(
children: <Widget>[
Icon(
Icons.location_on,
color: secondary,
size: 20,
),
SizedBox(
width: 5,
),
Text(
lists[index].baseLocation + ", " + lists[index].country,
style: TextStyle(
color: primary, fontSize: 13, letterSpacing: .3)),
],
),
SizedBox(
height: 6,
),
Row(
children: <Widget>[
Icon(
Icons.timer,
color: secondary,
size: 20,
),
SizedBox(
width: 5,
),
Text(
lists[index].registrationDate ,
style: TextStyle(
color: primary, fontSize: 13, letterSpacing: .3)),
],
),
],
),
),
ButtonTheme(
minWidth: 40.0,
height: 100.0,
child: RaisedButton(
onPressed: _unfollow(lists[index].uid),
color: Colors.redAccent,
textColor: Colors.white,
child: Text(
'Unfollow',
style: new TextStyle(
fontSize: 12.0,
color: Colors.white,
),
),
),
)
],
),
);
}
Problem is my buttons are inactive/disabled (grayed out).
Here is the Function which I am creating.
_unfollow(int unfollowid) {
int unFollowid = unfollowid;
print(unFollowid);
}
I want to get the Id on button click. So, I can perform the async activity. I an open to other ways of handling such scenarios if necessary.

Missing () =>, Please replace below code in RaisedButton
onPressed: () => _unfollow(lists[index].uid)

try this
onPressed:(){ _unfollow(lists[index].uid)},

How to make cards swipeable like tabs in flutter? [duplicate]

This question already has answers here:
Horizontally scrollable cards with Snap effect in flutter
(6 answers)
Closed 3 years ago.
I have been trying to make cards swipeable like tabs as shown in my mocks.
I have added my code and mock for reference.
Code:
Container(
margin: EdgeInsets.only(top: 35),
child: Center(
child: Card(
child: InkWell(
// splashColor: Colors.blue.withAlpha(30),
onTap: () {
print('Card tapped.');
},
child: Container(
width: 300,
height: 450,
padding: EdgeInsets.all(30),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'3 month Test Pass',
style: TextStyle(
fontSize: 23, fontWeight: FontWeight.bold),
),
Container(
margin: EdgeInsets.only(top: 10),
child: Text(
'50% off for early Birds',
style: TextStyle(
color: Colors.black54, fontSize: 16),
),
),
Container(
margin: EdgeInsets.only(top: 40),
child: Text(
'INR 49/month',
style: TextStyle(
fontSize: 21, fontWeight: FontWeight.bold),
),
),
Container(
margin: EdgeInsets.only(top: 7),
child: Text(
'INR 147 for 90 days',
style: TextStyle(
color: Colors.black54,
fontSize: 16,
fontWeight: FontWeight.bold),
),
),
Container(
margin: EdgeInsets.only(top: 30),
child: Text(
'New live exam every Monday',
style: TextStyle(
color: Colors.black87,
fontSize: 16,
),
),
),
Container(
margin: EdgeInsets.only(top: 15),
child: Text(
'Unlimited practise tests series',
style: TextStyle(
color: Colors.black87,
fontSize: 16,
),
),
),
Container(
margin: EdgeInsets.only(top: 15),
child: Text(
'Paper tailored by AI for you',
style: TextStyle(
color: Colors.black87,
fontSize: 16,
),
),
),
Container(
margin: EdgeInsets.only(top: 15),
child: Text(
'Solved previous year questions',
style: TextStyle(
color: Colors.black87,
fontSize: 16,
),
),
),
Container(
margin: EdgeInsets.only(top: 35),
child: RaisedButton(
padding: const EdgeInsets.only(top:10,bottom:10,left:40,right: 40),
textColor: Colors.black,
color: Colors.green,
child: Text('Buy Now',style: TextStyle(fontSize: 20),),
onPressed: null,
),
),
],
),
),
),
),
),
)
This is a container showing only one card, which is added in an array of Column in the body of Scaffold.
The idea is to have horizontally swipeable cards to make the user see the plans.
I am a beginner in Flutter.

You can use a ListView then set the scroll direction to horizontal
Just put all your containers / cards in the list view
Example:
ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
width: 160.0,
color: Colors.red,
),
Container(
width: 160.0,
color: Colors.blue,
),
Container(
width: 160.0,
color: Colors.green,
),
Container(
width: 160.0,
color: Colors.yellow,
),
Container(
width: 160.0,
color: Colors.orange,
),
],
),
References
ListView - horizontal