Bottomsheet not allowing the container to show its properties in Flutter - android

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

Related

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"),
),
),
],
),
),
],
),
),
);
}
}

Container that changes size [duplicate]

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),
),
)
],
),
),
),
);
}),
),
],
),
),
);
}
}

Container text and icons alignment- need to align this icon to right of this container

I need to make this favourite icon to the right of the container. I can use padding but is it ok? I mean is it going to work with all devices. Is there any solid way to align these 3 containers? I made a list view because I am adding more stuff like this one. can you guys help me with this?
Here is the image
Here is my code
class _OrdersState extends State<Orders> {
#override
Widget build(BuildContext context) {
return Material(
child: SafeArea(
child: Stack(
children: [
Background(),
Positioned(
top: 10,
left: 5,
child: SizedBox(
// width: 10,
// height: 10,
child: Container(
color: Colors.transparent,
child: IconButton(
icon: Icon(Icons.arrow_back),
color: Colors.white,
//go back
onPressed: () => Navigator.of(context).pop(),
),
),
),
),
Positioned(
top: 90,
left: 22,
right: 22,
child: SizedBox(
width: 350,
height: 900,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 3,
blurRadius: 7,
),
],
),
child: Row(
children: [
Container(
color: Colors.blue,
margin: EdgeInsets.all(2),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'3:32',
style: TextStyle(fontSize: 20),
),
),
),
Container(
color: Colors.red,
child: Text(
'Order 1',
style: TextStyle(fontSize: 20),
),
),
Container(
color: Colors.amber,
child: Icon(Icons.favorite),
)
],
),
),
),
),
],
),
),
);
}
}

In the Row try to use and Expanded widget like this
Row(
children: [
Expanded(
child: Row(
children: [
Container(
color: Colors.blue,
margin: EdgeInsets.all(2),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'3:32',
style: TextStyle(fontSize: 20),
),
),
),
Container(
color: Colors.red,
child: Text(
'Order 1',
style: TextStyle(fontSize: 20),
),
),
],
),
),
Container(
color: Colors.amber,
child: Icon(Icons.favorite),
)
],
)

http request stop when i made build release flutter

I have a problem with my application,
when I make run in the emulator everything works well.
just when I made build apk, the application stops to get data from API URL, I tried it with debug version and everything works well.
so the problem with release version.
for sure I have internet permission in the Android manifest file.
I'm working with package:dio/dio.dart for HTTP request
Dart Code
import 'package:caro_app/restaurant.dart';
import 'package:caro_app/screens/FadeAnimation.dart';
import 'package:caro_app/screens/restaurant.dart';
import 'package:dio/dio.dart' as http_dio;
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:async';
import 'card.dart';
class HomePageApp extends StatefulWidget {
#override
_HomePageAppState createState() => _HomePageAppState();
}
class _HomePageAppState extends State<HomePageApp> {
Future<List<Restaurant>> _getRestaurantDio() async {
http_dio.Dio dio = http_dio.Dio();
http_dio.Response response = await dio
.get("myurl");
List data = response.data;
return data.map((e) => Restaurant.fromJson(e)).toList();
}
List<Food> food = [];
int sum = 0;
bool isDone = false;
List<Restaurant> allRestaurant = [];
#override
void initState() {
super.initState();
getData();
}
getData() async {
allRestaurant = await _getRestaurantDio();
isDone = true;
setState(() {});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.transparent,
leading: Container(
child: Icon(
Icons.menu,
color: Colors.orange,
),
),
title: Text(
"Bogota",
style: TextStyle(color: Colors.white, fontSize: 25),
),
brightness: Brightness.light,
actions: <Widget>[
IconButton(
icon: Icon(
Icons.notifications_none,
color: Colors.orange,
),
onPressed: () {},
),
IconButton(
icon: Icon(
Icons.shopping_cart,
color: Colors.orange,
),
onPressed: () {
Route route =
MaterialPageRoute(builder: (context) => CartScreen());
Navigator.push(context, route);
},
)
],
),
body: Stack(
children: <Widget>[
Container(
child: Container(
height: 40,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
AspectRatio(
aspectRatio: 2.2 / 1,
child: FadeAnimation(
1,
Container(
margin: EdgeInsets.only(right: 10),
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(20)),
child: Center(
child: Text(
"All",
style:
TextStyle(fontSize: 20, color: Colors.orange),
),
),
)),
),
AspectRatio(
aspectRatio: 2.2 / 1,
child: FadeAnimation(
1.1,
Container(
margin: EdgeInsets.only(right: 10),
child: Center(
child: Text(
"Shaorma",
style:
TextStyle(fontSize: 17, color: Colors.orange),
),
),
)),
),
AspectRatio(
aspectRatio: 2.2 / 1,
child: FadeAnimation(
1.2,
Container(
margin: EdgeInsets.only(right: 10),
child: Center(
child: Text(
"Falafel",
style:
TextStyle(fontSize: 17, color: Colors.orange),
),
),
)),
),
AspectRatio(
aspectRatio: 2.2 / 1,
child: FadeAnimation(
1.3,
Container(
margin: EdgeInsets.only(right: 10),
child: Center(
child: Text(
"Burger",
style:
TextStyle(fontSize: 17, color: Colors.orange),
),
),
)),
),
AspectRatio(
aspectRatio: 2.2 / 1,
child: FadeAnimation(
1.4,
Container(
margin: EdgeInsets.only(right: 10),
child: Center(
child: Text(
"Pizza",
style:
TextStyle(fontSize: 17, color: Colors.orange),
),
),
)),
),
],
),
),
),
Container(
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
padding: EdgeInsets.only(
left: 8.0, right: 8.0, top: 75.0, bottom: 0.0),
child: FutureBuilder(
future: _getRestaurantDio(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
print(snapshot.data);
if (snapshot.data == null) {
return Container(
child: Center(
child: Text('Loading..',style: TextStyle(color:Colors.white),),
),
);
} else {
List<Restaurant> restaurant = snapshot.data;
return GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1),
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index) {
return Container(
child: InkWell(
onTap: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => ItemScreen(
user: restaurant[index],
valueSetter: (selectedProducts) {
setState(() {
restaurant
.add(snapshot.data[index]);
sum = 0;
food.forEach((item) {
sum = sum + item.price;
print(sum);
});
});
})));
},
child: FadeAnimation(
1,
Container(
// height: 250,
width: double.infinity,
padding: EdgeInsets.all(20),
margin: EdgeInsets.only(bottom: 20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
image:
NetworkImage(restaurant[index].img),
fit: BoxFit.cover),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
FadeAnimation(
1,
Text(
restaurant[index].name,
style: TextStyle(
color: Colors.orange,
fontSize: 30,
fontWeight:
FontWeight.bold),
)),
SizedBox(
height: 10,
),
FadeAnimation(
1.1,
Container(
padding:
EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.orange,
borderRadius:
BorderRadius
.circular(
20)),
child: Text(
restaurant[index]
.family,
style: TextStyle(
color: Colors.white,
fontSize: 20),
))),
],
),
),
FadeAnimation(
1.2,
Container(
width: 35,
height: 35,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.orange),
child: Center(
child: Icon(
Icons.favorite_border,
size: 20,
color: Colors.white,
),
),
))
],
),
FadeAnimation(
1.2,
Container(
child: Container(
padding: EdgeInsets.all(9),
width: 200,
decoration: BoxDecoration(
color: Colors.deepOrange,
borderRadius:
BorderRadius.circular(20)),
child: Row(
children: <Widget>[
Icon(Icons.location_on),
SizedBox(
width: 10,
),
Text(
restaurant[index].city,
style: TextStyle(
color: Colors.white,
fontSize: 30,
fontWeight:
FontWeight.bold),
),
],
),
))),
],
),
),
),
),
);
},
);
}
},
),
),
),
],
),
);
}
}
class User {
final String name;
final String family;
final String city;
final String img;
List<String> food;
User(this.name, this.family, this.city, this.img);
}

add internet permission to Manifest file inside the android folder and make true the uses-clear-text-traffic if you get data from non https address;
<manifest ...>
<uses-permission android:name="android.permission.INTERNET" />
<application
...
android:usesCleartextTraffic="true"
...>
...
</application>
</manifest>

Categories

Resources