Container that changes size [duplicate]

Container that changes size [duplicate] - android

Good Evening fellow Developers,
I am trying to find a way for my parent container to have its height set to be equal to the child text widget content.
The text (textDes) in the Text widget is changing. It can be short or long and for that reason I can not set the height: to a specific number like 1400 because it will look ugly.
Please be so kind and help me, trying for hours.
import 'package:angelbay_bungalows/screens/overview.dart';
import 'package:angelbay_bungalows/widgets/drawer.dart';
import 'package:flutter/material.dart';
class Amenities extends StatelessWidget {
final String titleTop;
final String textDes;
final String img;
Amenities(this.titleTop, this.textDes, this.img);
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
#override
Widget build(BuildContext context) {
var screenSize = MediaQuery.of(context).size;
return Scaffold(
key: scaffoldKey,
drawer: AppDrawer(),
body: SingleChildScrollView(
child: Container(
height: 1400,
width: screenSize.width,
child: Stack(
// overflow: Overflow.visible,
children: <Widget>[
Image.asset(
"$img",
height: 400.0,
width: screenSize.width,
fit: BoxFit.cover,
),
Positioned(),
Positioned(),
Positioned(
top: 375.0,
child: Container(
// height: ,
width: screenSize.width,
decoration: BoxDecoration(
color: Color.fromRGBO(216, 216, 216, 1),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
),
),
child: Padding(
padding: const EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
titleTop,
style: TextStyle(
color: Colors.black,
fontSize: 26.0,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 40.0,
),
Text(
'Description',
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w500,
color: Color.fromRGBO(50, 54, 67, 1),
),
),
SizedBox(
height: 20.0,
),
Text(
textDes,
style: TextStyle(
fontSize: 16.0,
color: Color.fromRGBO(117, 117, 117, 1),
),
),
],
),
),
),
),
],
),
)),
);
}
}

Wrap your Text widget inside an Expanded and remove the hardcoded height of 1400
Expanded(
child: Text(
textDes,
style: TextStyle(
fontSize: 16.0,
color: Color.fromRGBO(117, 117, 117, 1),
),
),
),
Hope it helps!!

After long hours, this is what I came up with and works.
import 'package:angelbay_bungalows/screens/overview.dart';
import 'package:angelbay_bungalows/widgets/drawer.dart';
import 'package:flutter/material.dart';
class Amenities extends StatelessWidget {
final String titleTop;
final String textDes;
final String img;
Amenities(this.titleTop, this.textDes, this.img);
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
#override
Widget build(BuildContext context) {
var screenSize = MediaQuery.of(context).size;
return Scaffold(
key: scaffoldKey,
drawer: AppDrawer(),
body: Container(
color: Color.fromRGBO(216, 216, 216, 1),
child: Stack(
// overflow: Overflow.visible,
children: <Widget>[
Image.asset(
"$img",
height: 400,
width: screenSize.width,
fit: BoxFit.cover,
),
Positioned(
top: 50.0,
left: 10.0,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return Overview();
},
),
);
},
child: Icon(
Icons.arrow_back_ios,
color: Colors.white,
size: 30.0,
),
),
),
Positioned(
top: 50.0,
right: 10.0,
child: GestureDetector(
onTap: () => scaffoldKey.currentState.openDrawer(),
child: Icon(
Icons.menu,
color: Colors.white,
size: 30.0,
)),
),
Padding(
padding: const EdgeInsets.only(top: 40),
child: DraggableScrollableSheet(
initialChildSize: 0.5,
minChildSize: 0.5,
maxChildSize: 0.8,
builder: (context, controller) {
return SingleChildScrollView(
controller: controller,
child: Container(
width: screenSize.width,
decoration: BoxDecoration(
color: Color.fromRGBO(216, 216, 216, 1),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
titleTop,
style: TextStyle(
color: Colors.black,
fontSize: 26.0,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 40.0,
),
Text(
'Description',
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w500,
color: Color.fromRGBO(50, 54, 67, 1),
),
),
SizedBox(
height: 20.0,
),
Text(
textDes,
style: TextStyle(
fontSize: 16.0,
color: Color.fromRGBO(117, 117, 117, 1),
),
)
],
),
),
),
);
}),
),
],
),
),
);
}
}

Related

Bottomsheet not allowing the container to show its properties in Flutter

I want to have a draggable bottom sheet for which I have written the code. But the problem is bottom sheet is shown properly but the body has a container and that is not shown. Can somebody help me with the same. If I run the code without bottomsheet it runs properly. I am unable to figure out where is the problem
import 'package:flutter/material.dart';
class HomePage1 extends StatelessWidget {
const HomePage1({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
double height = MediaQuery.of(context).size.height;
return Scaffold(
backgroundColor: const Color(0xFF1E2129),
body: Stack(
children: [
Positioned.fill(
top: 150,
child: Container(
height: height * .4,
width: double.maxFinite,
color: const Color(0xFF1E2129),
child: Row(
children: [
const SizedBox(width: 24),
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
/* image: DecorationImage(
image: AssetImage('images/p1.png'),
),*/
border: Border.all(
color: const Color(0xFF3B414F), width: 1.0),
borderRadius: const BorderRadius.all(Radius.circular(12)),
),
child: const Icon(
Icons.message,
color: Color(0xFFBBFFF3),
size: 15,
),
),
const SizedBox(
width: 12,
),
const Text(
'Somnio Software',
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.bold,
),
)
],
),
),
),
],
),
bottomSheet: DraggableScrollableSheet(
builder: (BuildContext context, ScrollController scrollController) {
return ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 32),
color: Colors.blue,
child: Column(
children: [
Text(
'DIRECT MESSAGES',
style: TextStyle(
color: Colors.grey.shade800,
fontWeight: FontWeight.bold,
fontSize: 10),
),
],
),
),
);
/*Container(
color: Colors.green,
child: ListView.builder(
controller: scrollController,
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return Container(
padding: EdgeInsets.all(5),
child: Card(
child: ListTile(
title: Text('Item $index'),
)),
);
}),
);*/
},
initialChildSize: .6,
),
);
}
}

DraggableScrollableSheet is always display in bottom no need to attached with bottom sheet,
Just drag into stack (as mentioned below)
Stack(
alignment: AlignmentDirectional.topStart,
children: [
Positioned.fill(
top: 150,
child: Container(
height: height * .4,
width: double.maxFinite,
color: const Color(0xFF1E2129),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(width: 24),
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
/* image: DecorationImage(
image: AssetImage('images/p1.png'),
),*/
color: Color(0xFF1E2129),
border: Border.all(
color: const Color(0xFF3B414F), width: 1.0),
borderRadius: const BorderRadius.all(Radius.circular(12)),
),
child: const Icon(
Icons.message,
color: Color(0xFFBBFFF3),
size: 15,
),
),
const SizedBox(
width: 12,
),
const Text(
'Somnio Software',
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.bold,
),
)
],
),
),
),
DraggableScrollableSheet(
builder: (BuildContext context, ScrollController scrollController) {
return ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 32),
color: Colors.blue,
child: Column(
children: [
Text(
'DIRECT MESSAGES',
style: TextStyle(
color: Colors.grey.shade800,
fontWeight: FontWeight.bold,
fontSize: 10),
),
],
),
),
);
/*Container(
color: Colors.green,
child: ListView.builder(
controller: scrollController,
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return Container(
padding: EdgeInsets.all(5),
child: Card(
child: ListTile(
title: Text('Item $index'),
)),
);
}),
);*/
},
initialChildSize: .6,
)
],
),
See the Output...

you should try a function called bottom Model sheet and make it use in your project..
https://api.flutter.dev/flutter/material/showModalBottomSheet.html
you can find it on flutter api

Can we group or filter data inside our hive boxes

I use hive to store my data locally in expense tracker app. I have saved all expenses in a box called expenseBox. I have given each expense item a date and I want items with the same date to be grouped together and displayed separately. Is there a way to achieve this?
Thanks for your help!
BTW this is the code for my homescreen where I display the items.
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'package:flutter_locales/flutter_locales.dart';
import '/models/expense.dart';
import '/widgets/expense_list_tile.dart';
import '/screens/add_expense_screen.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
static const routeName = '/home_page';
#override
_HomeScreenState createState() => _HomeScreenState();
}
enum SlidableAction {
edit,
delete,
}
class _HomeScreenState extends State<HomeScreen> {
late Box expenseBox;
late Box pocketBox;
bool isFabVisible = true;
#override
void initState() {
expenseBox = Hive.box<Expense>('expenses');
pocketBox = Hive.box<int>('pocket');
super.initState();
}
#override
Widget build(BuildContext context) {
return ValueListenableBuilder(
valueListenable: Hive.box<int>('pocket').listenable(),
builder: (context, Box<int> pocketBox, child) => Scaffold(
appBar: AppBar(
title: const LocaleText('appName'),
elevation: 0,
centerTitle: true,
),
body: NestedScrollView(
headerSliverBuilder: (context, _) => [
SliverAppBar(
expandedHeight: MediaQuery.of(context).size.height * 0.15,
flexibleSpace: FlexibleSpaceBar(
background: Container(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: Row(
children: [
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const LocaleText(
'appName',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
Text(
'${pocketBox.get('budget') ?? 0}',
style: const TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const LocaleText(
'income',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
Text(
'${pocketBox.get('totalIncome') ?? 0}',
style: const TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const LocaleText(
'expense',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
Text(
'${pocketBox.get('totalExpense') ?? 0}',
style: const TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold),
),
],
),
],
),
),
Expanded(child: Container()),
],
),
),
),
),
],
body: ValueListenableBuilder(
valueListenable: Hive.box<Expense>('expenses').listenable(),
builder: (context, Box<Expense> expensesBox, child) {
return NotificationListener<UserScrollNotification>(
onNotification: (notification) {
if (notification.direction == ScrollDirection.forward) {
if (!isFabVisible) setState(() => isFabVisible = true);
} else if (notification.direction ==
ScrollDirection.reverse) {
if (isFabVisible) setState(() => isFabVisible = false);
}
return true;
},
child: Scrollbar(
thickness: 5,
interactive: true,
child: ListView.separated(
separatorBuilder: (context, index) {
return const SizedBox();
},
itemCount: expenseBox.length,
itemBuilder: (context, index) {
final expense = expenseBox.getAt(index);
return ExpenseListTile(index: index, expense: expense);
},
),
),
);
},
),
),
floatingActionButton: isFabVisible
? FloatingActionButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (_) => const AddExpenseScreen(
index: -1,
),
));
},
child: const Icon(Icons.add),
)
: null,
),
);
}
}

You can try this code.
import 'package:flutter/material.dart';
import 'package:sticky_grouped_list/sticky_grouped_list.dart';
class MyMissionList extends StatefulWidget {
#override
State<MyMissionList> createState() => _MyMissionListState();
}
class _MyMissionListState extends State<MyMissionList> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(150.0),
child: Container(
decoration: BoxDecoration(
color: AppColors.baseLightBlueColor,
// AppColors.blue,
borderRadius: BorderRadius.only(bottomRight: Radius.circular(30)),
),
child: Material(
color: AppColors.baseLightBlueColor,
elevation: 15,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.only(bottomRight: Radius.circular(30)),
),
child: Column(
children: [
AppBar(
backgroundColor: AppColors.baseLightBlueColor,
elevation: 0.0,
actions: [
Container(
padding: EdgeInsets.only(right: 20),
child: Image.asset(
"assets/Vector-2.png",
height: 5,
width: 22,
color: Colors.white,
)),
],
),
Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.only(left: 20),
margin: EdgeInsets.only(bottom: 10),
decoration: BoxDecoration(
color: AppColors.baseLightBlueColor,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Hello User123,",
style:
TextStyle(color: AppColors.white, fontSize: 15),
),
SizedBox(height: 10),
Text(
AppStrings.totalAmount,
// "Montant total :",
style:
TextStyle(color: AppColors.white, fontSize: 11),
),
Text(
"592,30 €",
style:
TextStyle(color: AppColors.white, fontSize: 25),
),
],
),
)
],
),
),
)),
body: Column(
children: [
Padding(
padding: const EdgeInsets.only(left:15.0,right: 15,top: 15),
child: Text("My Mission",style: TextStyle(
color: Color(0xff243656),
fontSize: 15,
fontWeight: FontWeight.w300),
),
),
Expanded(
child: StickyGroupedListView<Element, DateTime>(
elements: elements,
order: StickyGroupedListOrder.ASC,
groupBy: (Element element) =>
DateTime(element.date.year, element.date.month, element.date.day),
groupComparator: (DateTime value1, DateTime value2) =>
value2.compareTo(value1),
itemComparator: (Element element1, Element element2) =>
element1.date.compareTo(element2.date),
floatingHeader: false,
groupSeparatorBuilder: (Element element) => Container(
height: 50,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
width: 220,
padding: EdgeInsets.only(left: 20,top: 20,bottom: 10),
child: Text(
'${element.heading}',
textAlign: TextAlign.start,
style: TextStyle(color: Color(0xff919AAA)),
),
),
],
),
),
itemBuilder: (_, Element element) {
return element.type
? GestureDetector(
onTap: () {
// Navigator.push(context, MaterialPageRoute(builder: (context)=> WaitingForValidation()));
},
child: Card(
elevation: 4,
margin: EdgeInsets.only(bottom: 15, right: 15, left: 15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Container(
height: 70,
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: AppColors.white),
child: Row(
children: [
Container(
width: MediaQuery.of(context).size.width * 0.62,
height: 50,
padding: EdgeInsets.only(top: 10,left: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
element.subTitle +
'${element.date.day}/${element.date.month}/'
'${element.date.year}',
style: TextStyle(
//color:AppColors.grey
color: Color(0xff919AAA),
fontSize: 12,
fontWeight: FontWeight.w300),
),
SizedBox(height: 2,),
Text(
element.hotelName,
style: TextStyle(
//color:AppColors.grey
color: Color(0xff243656),
fontSize: 15,
fontWeight: FontWeight.w300),
),
],
),
),
Padding(
padding: const EdgeInsets.all(5.0),
child: Card(
elevation: 15.0,
shadowColor: Colors.blue[100],
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(20.0))),
child: Container(
height: 30,
width: 80,
decoration: BoxDecoration(
// boxShadow: [BoxShadow(color: AppColors.grey, blurRadius: 20.0)],
borderRadius:
BorderRadius.circular(20.0),
gradient: LinearGradient(
colors: [
Colors.blue,
Colors.blue.shade900,
],
)),
child: MaterialButton(
onPressed: () {},
child: Text(
element.buttonText,
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.bold),
),
),
),
),
),
],
),
),
),
)
: Card(
elevation: 4,
margin: EdgeInsets.only(bottom: 15, right: 15, left: 15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Container(
height: 70,
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: AppColors.white),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
width: MediaQuery.of(context).size.width * 0.62,
height: 50,
padding: EdgeInsets.only(top: 10,left: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
element.subTitle +
'${element.date.day}/${element.date.month}/'
'${element.date.year}',
style: TextStyle(
//color:AppColors.grey
color: Color(0xff919AAA),
fontSize: 12,
fontWeight: FontWeight.w300),
),
SizedBox(height: 2,),
Text(
element.hotelName,
style: TextStyle(
//color:AppColors.grey
color: Color(0xff243656),
fontSize: 15,
fontWeight: FontWeight.w300),
),
],
),
),
Padding(
padding: const EdgeInsets.only(top:5.0,bottom: 5),
child: Container(
height: 30,
width: 95,
child: MaterialButton(
onPressed: () {},
child: Text(
element.buttonText,
style: TextStyle(
color: AppColors.green,
fontSize: 14,
fontWeight: FontWeight.bold),
),
),
),
)
],
),
),
);
},
),
),
],
),
);
}
}
class Element {
bool type;
DateTime date;
String hotelName;
String subTitle;
String heading;
String buttonText;
Element(this.date, this.type, this.hotelName, this.subTitle, this.heading,
this.buttonText);
}
List<Element> elements = <Element>[
Element(
DateTime(2020, 7, 22),
false,
"Rendez-vous equipe prod",
"Jeudi",
"Terminate",
"Terminate",
),
Element(
DateTime(2021, 10, 15),
false,
"Rendez-vous equipe prod",
"Jeudi",
"Terminate",
"Terminate",
),
Element(
DateTime(2021, 10, 15),
false,
"Rendez-vous equipe prod",
"Jeudi",
"Terminate",
/**/
"Terminate",
),
Element(
DateTime(2021, 12, 12),
true,
"Visite entrepot Villabe ",
"Mercredi",
"To Plan",
"To Plan",
),
];

How to increase button width inside a column to take up the full width of the container

Guys i have a container with a column inside it and i am trying to make two buttons inside that column take up the width of the container but i keep failing at it. I tried wrapping the buttons in a row, i tried wrapping them in a sizedbox but i cant seem to figure it out.
The text buttons i am talking about are in the middle code section and i added a comment next to them
class ProfilePicPreference extends StatelessWidget {
const ProfilePicPreference({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
return Scaffold(
backgroundColor: Colors.transparent,
body: SizedBox(
width: width,
height: height,
child: Stack(
children: [
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomLeft,
colors: [Color(0xFF1F1F1F), Color(0xFF1F1F1F)],
),
image: DecorationImage(
image: AssetImage("lib/assets/images/topbig.png"),
alignment: Alignment.topCenter,
),
),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('lib/assets/images/toptop.png'),
alignment: Alignment.topCenter,
),
),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('lib/assets/images/top.png'),
alignment: Alignment.topCenter,
),
),
),
Positioned(
top: 70.0,
left: 30.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: [
InkWell(
onTap: () {},
child: Container(
decoration: BoxDecoration(),
child: ClipRRect(
// borderRadius: BorderRadius.circular(10.0),
child: Image.asset('lib/assets/images/bluetick.png',
width: 40.0, height: 40.0),
),
),
),
Text(
"━━━━━",
style: TextStyle(color: kcPrimaryColor),
),
InkWell(
onTap: () {},
child: Container(
decoration: BoxDecoration(),
child: ClipRRect(
// borderRadius: BorderRadius.circular(10.0),
child: Image.asset('lib/assets/images/bluetick.png',
width: 40.0, height: 40.0),
),
),
),
Text(
"━━━━━",
style: TextStyle(color: kcMediumGreyColor),
),
InkWell(
onTap: () {},
child: Container(
decoration: BoxDecoration(),
child: ClipRRect(
// borderRadius: BorderRadius.circular(10.0),
child: Image.asset('lib/assets/images/bluetick.png',
width: 40.0, height: 40.0),
),
),
),
Text(
"━━━━━",
style: TextStyle(color: kcMediumGreyColor),
),
InkWell(
onTap: () {},
child: Container(
decoration: BoxDecoration(),
child: ClipRRect(
// borderRadius: BorderRadius.circular(10.0),
child: Image.asset('lib/assets/images/purplewatch.png',
width: 40.0, height: 40.0),
),
),
),
],
),
),
Positioned(
top: 130.0,
left: 25.0,
child: Row(
children: [
Text(
"Profile",
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat',
),
),
SizedBox(
width: 40,
),
Text(
"Relationship",
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat',
),
),
SizedBox(
width: 40,
),
Text(
"Music",
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat',
),
),
SizedBox(
width: 40,
),
Text(
"Profile Pic",
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat',
),
)
],
)),
Positioned(
top: 200,
right: 100,
child: Align(
alignment: Alignment.center,
child: Text(
'Upload your Profile Pic',
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat',
),
),
),
),
Positioned(
top: 350,
left: 35,
child: SizedBox(
width: width / 1.2,
height: height / 3,
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Container(
color: Colors.grey[850],
child: Column(
children: [
SizedBox(
height: 90,
),
SizedBox(
height: 10,
),
TextButton(. //other button i want to increase width
style: ButtonStyle(
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
),
backgroundColor: MaterialStateProperty.all<Color>(
kcPrimaryColor),
foregroundColor: MaterialStateProperty.all<Color>(
Colors.white)),
onPressed: () {},
child: Text("Upload Picture"),
),
TextButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => MusicPreferences()),
);
},
child: Text("I will do it later"), //button i want to increase width of
style: ButtonStyle(
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
),
backgroundColor: MaterialStateProperty.all<Color>(
Colors.transparent),
foregroundColor: MaterialStateProperty.all<Color>(
kcPrimaryColor)),
),
],
),
),
),
),
),
Positioned(
top: 290,
left: 140,
child: SizedBox(
width: 150,
height: 150,
child: ClipRRect(
borderRadius: BorderRadius.circular(100.0),
child: Container(
color: Colors.grey[850],
),
)),
),
Positioned(
top: 280,
left: 165,
child: SizedBox(
width: 100,
height: 150,
child: CircleAvatar(
backgroundImage:
AssetImage("lib/assets/images/randomface.jpg"),
),
),
),
Positioned(
bottom: 50,
child: Row(
children: [
SizedBox(
height: 60,
width: width / 2,
child: TextButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => MusicPreferences()),
);
},
child: Text("Back"),
style: ButtonStyle(
shape:
MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
),
backgroundColor: MaterialStateProperty.all<Color>(
Colors.transparent),
foregroundColor:
MaterialStateProperty.all<Color>(kcPrimaryColor)),
),
),
SizedBox(
height: 60,
width: width / 2,
child: TextButton(
style: ButtonStyle(
shape:
MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
),
backgroundColor:
MaterialStateProperty.all<Color>(kcPrimaryColor),
foregroundColor:
MaterialStateProperty.all<Color>(Colors.white)),
onPressed: () {},
child: Text("Done"),
),
),
],
),
),
],
),
),
);
}
}

Flutter Swipe Cards Lagging and Swiping is too slow what is the solution to make it fast?

I am building a tinder and bumble like dating app in a flutter. So, I am using swipe cards and as I have to make it scrollable so when I make it scrollable then the swiping is too slow and there is so much lagging so is there any solution to get rid of it?
Here is my code:
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:swipe_cards/swipe_cards.dart';
class HomeScreen extends StatefulWidget {
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
List<String> _images = [
"https://images.unsplash.com/photo-1594744803329-e58b31de8bf5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80",
"https://static01.nyt.com/images/2019/11/17/books/review/17Salam/Salam1-superJumbo.jpg",
"https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80",
"https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80",
"https://images.unsplash.com/photo-1488716820095-cbe80883c496?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=333&q=80",
"https://images.unsplash.com/photo-1485043433441-db091a258e5a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80"
];
List<SwipeItem> _swipeItems = [];
MatchEngine? _matchEngine;
#override
void initState() {
// TODO: implement initState
for (int i = 0; i < _images.length; i++) {
_swipeItems.add(SwipeItem(content: _images[i]));
}
_matchEngine = MatchEngine(swipeItems: _swipeItems);
super.initState();
}
#override
Widget build(BuildContext context) {
double screenWidth = MediaQuery.of(context).size.width;
double screenHeight = MediaQuery.of(context).size.height;
return Scaffold(
//backgroundColor: Color(0xff7cc8cc),
appBar: AppBar(
backgroundColor: Color(0xff76c9b2),
centerTitle: true,
title: Text('Flutter Tinder Cards'),
),
body: SwipeCards(
matchEngine: _matchEngine!,
onStackFinished: () {},
itemBuilder: (context, index) {
return Container(
height: screenHeight,
width: screenWidth,
child: Card(
margin: EdgeInsets.all(0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(0)),
side: BorderSide(color: Colors.grey)
),
child: SingleChildScrollView(
child: Column(
children: [
CachedNetworkImage(
placeholder: (context, url) =>
Center(child: CircularProgressIndicator()),
height: screenHeight,
width: screenWidth,
fit: BoxFit.cover,
//imageUrl: imgUrls![0],
imageUrl: _images[0],
),
Padding(
padding: const EdgeInsets.only(
left: 23.0,
top: 12,
bottom: 12,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Poonam, 18',
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.w700,
color: Colors.black87),
),
],
),
),
Padding(
padding: const EdgeInsets.only(
left: 23,
),
child: Row(
children: [
Icon(
Icons.location_on_sharp,
size: 20,
),
SizedBox(
width: 4,
),
Text(
'Surat, India',
style: TextStyle(
fontSize: 18,
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(
top: 12, left: 23, right: 22, bottom: 8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Personal Information',
style: TextStyle(
fontWeight: FontWeight.w700, fontSize: 18),
),
SizedBox(
height: 6,
),
Text(
'Ex - Zerodha, Ex - Grant Thornton. I used to crunch numbers and value companies for a living, now I’m trying to build one.',
style: TextStyle(fontSize: 12),
),
],
),
),
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Row(
children: [
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Height',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
"5'11",
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
),
SizedBox(width: 20),
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Community',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Vaishnav',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
)
],
),
),
SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Row(
children: [
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Gender',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Female',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
),
SizedBox(width: 20),
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Workout',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Regularly',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
)
],
),
),
SizedBox(
height: 30,
),
//imgUrls![1] == ''
Container(
height: 569,
child: CachedNetworkImage(
placeholder: (context, url) =>
CircularProgressIndicator(),
fit: BoxFit.cover,
//imageUrl: imgUrls![1],
imageUrl: _images[1],
),
),
Padding(
padding: const EdgeInsets.only(
top: 12, left: 23, right: 22, bottom: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Professional Information',
style: TextStyle(
fontWeight: FontWeight.w700, fontSize: 18),
),
],
),
),
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Row(
children: [
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Education',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Master Degree',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
),
SizedBox(width: 20),
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Worklife',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
)
],
),
),
SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Row(
children: [
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Salary',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Above 10Lpa',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
)
],
),
),
SizedBox(
height: 30,
),
//imgUrls![2] == ''
Container(
height: 569,
child: CachedNetworkImage(
placeholder: (context, url) =>
CircularProgressIndicator(),
fit: BoxFit.cover,
//imageUrl: imgUrls![2],
imageUrl: _images[2],
),
),
Padding(
padding: const EdgeInsets.only(
top: 12, left: 23, right: 22, bottom: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Social Life',
style: TextStyle(
fontWeight: FontWeight.w700, fontSize: 18),
),
],
),
),
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Row(
children: [
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Drinking',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Never',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
),
SizedBox(width: 20),
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Smoking',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Never',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
)
],
),
),
SizedBox(
height: 30,
),
Container(
height: 569,
child: CachedNetworkImage(
placeholder: (context, url) =>
CircularProgressIndicator(),
fit: BoxFit.cover,
//imageUrl: imgUrls![3],
imageUrl: _images[3],
),
),
Padding(
padding: const EdgeInsets.only(
top: 12, left: 23, right: 22, bottom: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Others',
style: TextStyle(
fontWeight: FontWeight.w700, fontSize: 18),
),
],
),
),
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Row(
children: [
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Zodiac Sign',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Leo',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
),
SizedBox(width: 20),
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Political inclination',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Apolitics',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
)
],
),
),
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Row(
children: [
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Movies',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Hindi Cinema',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
)
],
),
),
SizedBox(
height: 30,
),
//imgUrls![4] == ''
Container(
height: 569,
child: CachedNetworkImage(
placeholder: (context, url) =>
CircularProgressIndicator(),
fit: BoxFit.cover,
imageUrl: _images[4],
//imageUrl: imgUrls![4],
),
),
SizedBox(
height: 20,
),
//imgUrls![5] == ''
Container(
height: 569,
child: CachedNetworkImage(
placeholder: (context, url) =>
CircularProgressIndicator(),
fit: BoxFit.cover,
imageUrl: _images[5],
//imageUrl: imgUrls![5],
),
),
SizedBox(
height: 80,
)
],
),
),
),
);
},
),
);
}
}
Here, instead of SinglechildScrollView I have also tried to use ListView and ListView.builder but the same problem appears.

You are testing the app in a emulator or a physical device? Debug mode or release?
Using debug mode all the app looks like slow and has a lot of lagging, even more when using a emulator.

How to Change the Text Title of Bottom Modal Sheet dynamically using list in flutter

I have multiple containers arranged in a grid layout in a Flutter Application. When these container widgets are tapped, there is a bottom modal sheet that is triggered. The challenge is that these containers will have to re-use the same bottom modal sheet anytime they are pressed while display the title underneath the container
created a list of titles
List<String> statementTitle = [
'Accounts',
'Budget Performance',
'Cashflow',
'Income',
'Financial Position',
'Tax Assessment'
];
class Report extends StatefulWidget {
int index;
//Report (this.index);
Report({Key key, this.index}) : super(key: key);
#override
_ReportState createState() {
return _ReportState();
}
}
class _ReportState extends State<Report> {
#override
void initState() {
super.initState();
}
#override
void dispose() {
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: true,
iconTheme: IconThemeData(color: Colors.black),
backgroundColor: Colors.white,
elevation: 0.0,
title: Text(
'Report',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w500,
color: Color.fromRGBO(35, 36, 44, 1)),
),
),
body: Container(
margin: EdgeInsets.symmetric(horizontal: 22),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
height: 284,
width: 331,
decoration: BoxDecoration(
color: Color.fromRGBO(242, 243, 255, 1),
borderRadius: BorderRadius.circular(24)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height: MediaQuery.of(context).size.height * 0.027,
),
Padding(
padding: const EdgeInsets.only(left: 14.0),
child: Text(
'Statement',
style: new TextStyle(
fontSize: 14.0,
color: Color.fromRGBO(35, 36, 44, 1),
fontWeight: FontWeight.normal,
fontFamily: "Gordita"),
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.022,
),
Container(
decoration: BoxDecoration(
color: Color.fromRGBO(242, 243, 255, 1),
borderRadius: BorderRadius.circular(8)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
GestureDetector(
onTap: () {
showModalBottomSheet(
context: context,
builder: (BuildContext bc) {
return _accountModalBottomSheet(context);
;
});
},
child: Container(
height: 89,
width: 90,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8)),
child: Padding(
padding: const EdgeInsets.only(left: 14.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height:
MediaQuery.of(context).size.height *
0.016,
),
Image.asset(
'images/doc.png',
scale: 2,
),
SizedBox(
height:
MediaQuery.of(context).size.height *
0.015,
),
Text(
'Accounts',
style: new TextStyle(
fontSize: 10.0,
color: Color.fromRGBO(86, 89, 109, 1),
fontWeight: FontWeight.normal,
fontFamily: "Gordita"),
)
],
),
),
),
),
GestureDetector(
onTap: () {
showModalBottomSheet(
context: context,
builder: (BuildContext bc) {
return _accountModalBottomSheet(context);
;
});
},
child: Container(
height: 89,
width: 90,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8)),
child: Padding(
padding: const EdgeInsets.only(left: 14.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height:
MediaQuery.of(context).size.height *
0.016,
),
Image.asset(
'images/doc.png',
scale: 2,
),
SizedBox(
height:
MediaQuery.of(context).size.height *
0.015,
),
Text(
'Budget\nPerformance',
style: new TextStyle(
fontSize: 10.0,
color: Color.fromRGBO(86, 89, 109, 1),
fontWeight: FontWeight.normal,
fontFamily: "Gordita"),
)
],
),
),
),
),
),
Widget _accountModalBottomSheet(context) {
return Container(
color: Color(0xFF737373),
height: MediaQuery.of(context).size.height * 0.6,
child: Container(
decoration: BoxDecoration(
color: Theme.of(context).canvasColor,
borderRadius: BorderRadius.only(
topLeft: const Radius.circular(25),
topRight: const Radius.circular(25),
),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 22.0),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: MediaQuery.of(context).size.height * 0.04,
),
Container(
child: Text(
// '$statementTitle',
statementTitle[widget.index],
style: TextStyle(
fontWeight: FontWeight.w500,
fontFamily: "Gordita",
color: Color.fromRGBO(35, 36, 44, 1),
fontSize: 18.0),
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.04,
),
Text(
'Select a date range',
style: TextStyle(
fontWeight: FontWeight.w500,
fontFamily: "Gordita",
color: Color.fromRGBO(98, 96, 116, 1),
fontSize: 14.0),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.04,
),
Container(
width: double.infinity,
decoration: BoxDecoration(
color: Color.fromRGBO(249, 249, 249, 1),
borderRadius: BorderRadius.circular(8)),
child: Row(
children: <Widget>[
Flexible(
child: Stack(
children: <Widget>[
Text(
'From',
style: TextStyle(
fontWeight: FontWeight.normal,
fontFamily: "Gordita",
color: Color.fromRGBO(98, 96, 116, 1),
fontSize: 12.0),
),
TextField(
decoration: InputDecoration(
prefixIcon: Container(
height: 16,
width: 16,
child: Image.asset('images/calendar.png'),
)),
)
],
),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.06,
),
Flexible(
child: Stack(
children: <Widget>[
Text(
'To',
style: TextStyle(
fontWeight: FontWeight.normal,
fontFamily: "Gordita",
color: Color.fromRGBO(98, 96, 116, 1),
fontSize: 12.0),
),
TextField(
decoration: InputDecoration(
prefixIcon: Container(
height: 16,
width: 16,
child: Image.asset('images/calendar.png'),
)),
)
],
),
)
],
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.04,
),
Stack(
children: <Widget>[
Text('Item'),
Padding(
padding: const EdgeInsets.only(top: 16.0),
child: DropdownButton<String>(
onChanged: categorySelected,
isExpanded: true,
value: "Weekly",
style: new TextStyle(
fontSize: 18.0,
color: Color.fromRGBO(35, 36, 44, 1),
fontWeight: FontWeight.w500,
fontFamily: "Gordita"),
items: <DropdownMenuItem<String>>[
const DropdownMenuItem<String>(
value: "Weekly", child: const Text("Weekly")),
const DropdownMenuItem<String>(
value: "Monthly", child: const Text("Monthly")),
const DropdownMenuItem<String>(
value: "Quarterly",
child: const Text("Quarterly")),
],
),
)
],
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.06,
),
Container(
height: 48.0,
width: double.infinity,
decoration:
BoxDecoration(borderRadius: BorderRadius.circular(8)),
child: RaisedButton(
color: Color.fromRGBO(68, 74, 213, 1),
onPressed: () {
Navigator.of(context).popAndPushNamed('/successReport');
},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
SizedBox(
height: MediaQuery.of(context).size.width * 0.9,
),
Text(
'Fetch Report',
style: TextStyle(
color: Color.fromRGBO(235, 234, 250, 1),
fontSize: 14,
fontWeight: FontWeight.w500),
),
Icon(
Icons.arrow_forward,
color: Color.fromRGBO(235, 234, 250, 1),
)
],
),
),
)
],
),
),
));
}
void reportSelected(String value) {}
void categorySelected(String value) {}
}

You can copy paste run full code below
You can use for loop to generate Widget you need and pass statementTitle[i]
code snippet
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
for (int i = 3; i < statementTitle.length; i++)
GestureDetector(
onTap: () {
showModalBottomSheet(
context: context,
builder: (BuildContext bc) {
return _accountModalBottomSheet(
context,
statementTitle[i]);
});
},
...
Widget _accountModalBottomSheet(context, String statementTitle) {
return Container(
color: Color(0xFF737373),
working demo
full code
import 'package:flutter/material.dart';
List<String> statementTitle = [
'Accounts',
'Budget Performance',
'Cashflow',
'Income',
'Financial Position',
'Tax Assessment'
];
class Report extends StatefulWidget {
int index;
//Report (this.index);
Report({Key key, this.index}) : super(key: key);
#override
_ReportState createState() {
return _ReportState();
}
}
class _ReportState extends State<Report> {
#override
void initState() {
super.initState();
}
#override
void dispose() {
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: true,
iconTheme: IconThemeData(color: Colors.black),
backgroundColor: Colors.white,
elevation: 0.0,
title: Text(
'Report',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w500,
color: Color.fromRGBO(35, 36, 44, 1)),
),
),
body: Container(
margin: EdgeInsets.symmetric(horizontal: 22),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
height: 284,
width: 400,
decoration: BoxDecoration(
color: Color.fromRGBO(242, 243, 255, 1),
borderRadius: BorderRadius.circular(24)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height:
MediaQuery.of(context).size.height * 0.027,
),
Padding(
padding: const EdgeInsets.only(left: 14.0),
child: Text(
'Statement',
style: new TextStyle(
fontSize: 14.0,
color: Color.fromRGBO(35, 36, 44, 1),
fontWeight: FontWeight.normal,
fontFamily: "Gordita"),
),
),
SizedBox(
height:
MediaQuery.of(context).size.height * 0.022,
),
Container(
decoration: BoxDecoration(
color: Color.fromRGBO(242, 243, 255, 1),
borderRadius: BorderRadius.circular(8)),
child: Column(
children: <Widget>[
Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
for (int i = 0; i < 3; i++)
GestureDetector(
onTap: () {
showModalBottomSheet(
context: context,
builder: (BuildContext bc) {
return _accountModalBottomSheet(
context,
statementTitle[i]);
});
},
child: Container(
height: 89,
width: 90,
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.circular(
8)),
child: Padding(
padding:
const EdgeInsets.only(
left: 14.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment
.start,
children: <Widget>[
SizedBox(
height: MediaQuery.of(
context)
.size
.height *
0.016,
),
Image.asset(
'images/doc.png',
scale: 2,
),
SizedBox(
height: MediaQuery.of(
context)
.size
.height *
0.015,
),
Text(
statementTitle[i],
style: new TextStyle(
fontSize: 10.0,
color:
Color.fromRGBO(
86,
89,
109,
1),
fontWeight:
FontWeight
.normal,
fontFamily:
"Gordita"),
)
],
),
),
),
),
]),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
for (int i = 3;
i < statementTitle.length;
i++)
GestureDetector(
onTap: () {
showModalBottomSheet(
context: context,
builder: (BuildContext bc) {
return _accountModalBottomSheet(
context,
statementTitle[i]);
});
},
child: Container(
height: 89,
width: 90,
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.circular(
8)),
child: Padding(
padding:
const EdgeInsets.only(
left: 14.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment
.start,
children: <Widget>[
SizedBox(
height: MediaQuery.of(
context)
.size
.height *
0.016,
),
Image.asset(
'images/doc.png',
scale: 2,
),
SizedBox(
height: MediaQuery.of(
context)
.size
.height *
0.015,
),
Text(
statementTitle[i],
style: new TextStyle(
fontSize: 10.0,
color:
Color.fromRGBO(
86,
89,
109,
1),
fontWeight:
FontWeight
.normal,
fontFamily:
"Gordita"),
)
],
),
),
),
),
]),
],
))
]))
]))));
}
Widget _accountModalBottomSheet(context, String statementTitle) {
return Container(
color: Color(0xFF737373),
height: MediaQuery.of(context).size.height * 0.6,
child: Container(
decoration: BoxDecoration(
color: Theme.of(context).canvasColor,
borderRadius: BorderRadius.only(
topLeft: const Radius.circular(25),
topRight: const Radius.circular(25),
),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 22.0),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: MediaQuery.of(context).size.height * 0.04,
),
Container(
child: Text(
statementTitle,
//statementTitle[widget.index],
style: TextStyle(
fontWeight: FontWeight.w500,
fontFamily: "Gordita",
color: Color.fromRGBO(35, 36, 44, 1),
fontSize: 18.0),
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.04,
),
Text(
'Select a date range',
style: TextStyle(
fontWeight: FontWeight.w500,
fontFamily: "Gordita",
color: Color.fromRGBO(98, 96, 116, 1),
fontSize: 14.0),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.04,
),
Container(
width: double.infinity,
decoration: BoxDecoration(
color: Color.fromRGBO(249, 249, 249, 1),
borderRadius: BorderRadius.circular(8)),
child: Row(
children: <Widget>[
Flexible(
child: Stack(
children: <Widget>[
Text(
'From',
style: TextStyle(
fontWeight: FontWeight.normal,
fontFamily: "Gordita",
color: Color.fromRGBO(98, 96, 116, 1),
fontSize: 12.0),
),
TextField(
decoration: InputDecoration(
prefixIcon: Container(
height: 16,
width: 16,
child: Image.asset('images/calendar.png'),
)),
)
],
),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.06,
),
Flexible(
child: Stack(
children: <Widget>[
Text(
'To',
style: TextStyle(
fontWeight: FontWeight.normal,
fontFamily: "Gordita",
color: Color.fromRGBO(98, 96, 116, 1),
fontSize: 12.0),
),
TextField(
decoration: InputDecoration(
prefixIcon: Container(
height: 16,
width: 16,
child: Image.asset('images/calendar.png'),
)),
)
],
),
)
],
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.04,
),
Stack(
children: <Widget>[
Text('Item'),
Padding(
padding: const EdgeInsets.only(top: 16.0),
child: DropdownButton<String>(
onChanged: categorySelected,
isExpanded: true,
value: "Weekly",
style: new TextStyle(
fontSize: 18.0,
color: Color.fromRGBO(35, 36, 44, 1),
fontWeight: FontWeight.w500,
fontFamily: "Gordita"),
items: <DropdownMenuItem<String>>[
const DropdownMenuItem<String>(
value: "Weekly", child: const Text("Weekly")),
const DropdownMenuItem<String>(
value: "Monthly", child: const Text("Monthly")),
const DropdownMenuItem<String>(
value: "Quarterly",
child: const Text("Quarterly")),
],
),
)
],
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.06,
),
Container(
height: 48.0,
width: double.infinity,
decoration:
BoxDecoration(borderRadius: BorderRadius.circular(8)),
child: RaisedButton(
color: Color.fromRGBO(68, 74, 213, 1),
onPressed: () {
Navigator.of(context).popAndPushNamed('/successReport');
},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
SizedBox(
height: MediaQuery.of(context).size.width * 0.9,
),
Text(
'Fetch Report',
style: TextStyle(
color: Color.fromRGBO(235, 234, 250, 1),
fontSize: 14,
fontWeight: FontWeight.w500),
),
Icon(
Icons.arrow_forward,
color: Color.fromRGBO(235, 234, 250, 1),
)
],
),
),
)
],
),
),
));
}
void reportSelected(String value) {}
void categorySelected(String value) {}
}
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Report(index: 0),
);
}
}

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Container that changes size [duplicate] - android

Wrap your Text widget inside an Expanded and remove the hardcoded height of 1400 Expanded( child: Text( textDes, style: TextStyle( fontSize: 16.0, color: Color.fromRGBO(117, 117, 117, 1), ), ), ), Hope it helps!!

Related

Bottomsheet not allowing the container to show its properties in Flutter

Can we group or filter data inside our hive boxes

How to increase button width inside a column to take up the full width of the container

Flutter Swipe Cards Lagging and Swiping is too slow what is the solution to make it fast?

How to Change the Text Title of Bottom Modal Sheet dynamically using list in flutter

Categories

Resources