Padding in ListView Flutter

Padding in ListView Flutter - android

why I still got error?
import 'package:flutter/material.dart';
import 'package:kosan2_apps/tema.dart';
import 'package:kosan2_apps/widgets/facilities_item.dart';
class DetailPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: whiteColor,
body: SafeArea(
bottom: false,
child: Stack(children: [
Image.asset(
'assets/images/cover.png',
width: MediaQuery.of(context).size.width,
height: 350,
fit: BoxFit.cover,
),
ListView(
Padding(
padding: EdgeInsets.symmetric(
horizontal: edge,
vertical: 30,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
InkWell(
onTap: () {
Navigator.pop(context);
},
child: Image.asset(
'assets/images/btn_back.png',
width: 40,
),
),
Image.asset(
'assets/images/btn_wishlist.png',
width: 40,
),
],
),
),
children: [
SizedBox(
height: 328,
),
Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(
top: Radius.circular(20),
),
color: whiteColor,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 30,
),
//NOTE TITLE
Padding(
padding: EdgeInsets.symmetric(
horizontal: edge,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Danau Toba Village',
style: blackTextStyle.copyWith(
fontSize: 22,
),
),
SizedBox(
height: 2,
),
Text.rich(
TextSpan(
text: '\$52',
style: purpleTextStyle.copyWith(
fontSize: 16,
),
children: [
TextSpan(
text: '/ month',
style: greyTextStyle.copyWith(
fontSize: 16,
),
),
],
),
),
],
),
Row(
children: [
Image.asset(
'assets/images/icon_star.png',
width: 20,
),
SizedBox(
width: 2,
),
Image.asset(
'assets/images/icon_star.png',
width: 20,
),
SizedBox(
width: 2,
),
Image.asset(
'assets/images/icon_star.png',
width: 20,
),
SizedBox(
width: 2,
),
Image.asset(
'assets/images/icon_star.png',
width: 20,
),
SizedBox(
width: 2,
),
Image.asset(
'assets/images/icon_star.png',
width: 20,
color: Color(0xff989BA1),
),
],
),
],
),
),
SizedBox(
height: 30,
),
//NOTE MAIN FACILITIES
Padding(
padding: EdgeInsets.only(
left: edge,
),
child: Text(
'Main Facilities',
style: regularTextStyle.copyWith(
fontSize: 16,
),
),
),
SizedBox(
height: 12,
),
Padding(
padding: EdgeInsets.symmetric(
horizontal: edge,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
FacilitiesItem(
name: 'Kitchen',
imgUrl: 'assets/images/icon_kitchen.png',
totalItem: 2,
),
FacilitiesItem(
name: 'Bedroom',
imgUrl: 'assets/images/icon_bedroom.png',
totalItem: 3,
),
FacilitiesItem(
name: 'Big Cupboard',
imgUrl: 'assets/images/icon_cupboard.png',
totalItem: 4,
),
],
),
),
SizedBox(
height: 30,
),
//NOTE PHOTOS
Padding(
padding: EdgeInsets.only(left: edge),
child: Text(
'Photos',
style: regularTextStyle.copyWith(
fontSize: 16,
),
),
),
SizedBox(
height: 12,
),
Container(
height: 88,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
SizedBox(
width: 24,
),
Image.asset(
'assets/images/photo1.png',
width: 110,
height: 88,
fit: BoxFit.cover,
),
SizedBox(
width: 18,
),
Image.asset(
'assets/images/photo2.png',
width: 110,
height: 88,
fit: BoxFit.cover,
),
SizedBox(
width: 18,
),
Image.asset(
'assets/images/photo3.png',
width: 110,
height: 88,
fit: BoxFit.cover,
),
],
),
),
SizedBox(
height: 30,
//NOTE LOCATION
),
Padding(
padding: EdgeInsets.only(left: edge),
child: Text(
'Location',
style: regularTextStyle.copyWith(
fontSize: 16,
),
),
),
SizedBox(
height: 6,
),
Padding(
padding: EdgeInsets.symmetric(
horizontal: edge,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Jln Seto Lrg.Sipirok No.23\nMedan',
style: greyTextStyle,
),
Image.asset(
'assets/images/btn_location.png',
width: 40,
)
],
),
),
SizedBox(
height: 40,
),
Container(
margin: EdgeInsets.symmetric(
horizontal: edge,
),
height: 50,
width: MediaQuery.of(context).size.width - (2 * edge),
child: ElevatedButton(
onPressed: () {},
child: Text(
'Book Now',
style: TextStyle(
color: whiteColor,
fontSize: 18,
),
),
style: ButtonStyle(
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(17),
),
),
backgroundColor: MaterialStateProperty.resolveWith(
(states) {
return purpleColor;
},
),
),
),
),
SizedBox(
height: 40,
),
],
),
)
],
)
]),
),
);
}
}
Can anyone fix it?

You need to place Padding inside the children
class DetailPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: whiteColor,
body: SafeArea(
bottom: false,
child: Stack(children: [
Image.asset(
'assets/images/cover.png',
width: MediaQuery.of(context).size.width,
height: 350,
fit: BoxFit.cover,
),
ListView(
children: [
Padding( //here
padding: EdgeInsets.symmetric(
horizontal: edge,
vertical: 30,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
InkWell(
onTap: () {
Navigator.pop(context);
},
child: Image.asset(
'assets/images/btn_back.png',
width: 40,
),
),
Image.asset(
'assets/images/btn_wishlist.png',
width: 40,
),
],
),
),
SizedBox(
height: 328,
),
Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(
top: Radius.circular(20),
),
// color: whiteColor,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 30,
),
//NOTE TITLE
Padding(
padding: EdgeInsets.symmetric(
horizontal: edge,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Danau Toba Village',
// style: blackTextStyle.copyWith(
// fontSize: 22,
// ),
),
SizedBox(
height: 2,
),
Text.rich(
TextSpan(
text: '\$52',
// style: purpleTextStyle.copyWith(
// fontSize: 16,
// ),
children: [
TextSpan(
text: '/ month',
// style: greyTextStyle.copyWith(
// fontSize: 16,
// ),
),
],
),
),
],
),
Row(
children: [
// Image.asset(
// 'assets/images/icon_star.png',
// width: 20,
// ),
// SizedBox(
// width: 2,
// ),
// Image.asset(
// 'assets/images/icon_star.png',
// width: 20,
// ),
// SizedBox(
// width: 2,
// ),
// Image.asset(
// 'assets/images/icon_star.png',
// width: 20,
// ),
// SizedBox(
// width: 2,
// ),
// Image.asset(
// 'assets/images/icon_star.png',
// width: 20,
// ),
// SizedBox(
// width: 2,
// ),
// Image.asset(
// 'assets/images/icon_star.png',
// width: 20,
// color: Color(0xff989BA1),
// ),
],
),
],
),
),
SizedBox(
height: 30,
),
//NOTE MAIN FACILITIES
Padding(
padding: EdgeInsets.only(
left: edge,
),
child: Text(
'Main Facilities',
// style: regularTextStyle.copyWith(
// fontSize: 16,
// ),
),
),
SizedBox(
height: 12,
),
Padding(
padding: EdgeInsets.symmetric(
horizontal: edge,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
// FacilitiesItem(
// name: 'Kitchen',
// imgUrl: 'assets/images/icon_kitchen.png',
// totalItem: 2,
// ),
// FacilitiesItem(
// name: 'Bedroom',
// imgUrl: 'assets/images/icon_bedroom.png',
// totalItem: 3,
// ),
// FacilitiesItem(
// name: 'Big Cupboard',
// imgUrl: 'assets/images/icon_cupboard.png',
// totalItem: 4,
// ),
],
),
),
SizedBox(
height: 30,
),
//NOTE PHOTOS
Padding(
padding: EdgeInsets.only(left: edge),
child: Text(
'Photos',
style: regularTextStyle.copyWith(
fontSize: 16,
),
),
),
SizedBox(
height: 12,
),
Container(
height: 88,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
SizedBox(
width: 24,
),
Image.asset(
'assets/images/photo1.png',
width: 110,
height: 88,
fit: BoxFit.cover,
),
SizedBox(
width: 18,
),
Image.asset(
'assets/images/photo2.png',
width: 110,
height: 88,
fit: BoxFit.cover,
),
SizedBox(
width: 18,
),
Image.asset(
'assets/images/photo3.png',
width: 110,
height: 88,
fit: BoxFit.cover,
),
],
),
),
SizedBox(
height: 30,
//NOTE LOCATION
),
Padding(
padding: EdgeInsets.only(left: 0),
child: Text(
'Location',
// style: regularTextStyle.copyWith(
// fontSize: 16,
// ),
),
),
SizedBox(
height: 6,
),
Padding(
padding: EdgeInsets.symmetric(
// horizontal: edge,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Jln Seto Lrg.Sipirok No.23\nMedan',
// style: greyTextStyle,
),
Image.asset(
'assets/images/btn_location.png',
width: 40,
)
],
),
),
SizedBox(
height: 40,
),
Container(
margin: EdgeInsets.symmetric(
// horizontal: edge,
),
height: 50,
width: MediaQuery.of(context).size.width - (2 * edge),
child: ElevatedButton(
onPressed: () {},
child: Text(
'Book Now',
style: TextStyle(
// color: whiteColor,
fontSize: 18,
),
),
style: ButtonStyle(
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(17),
),
),
// backgroundColor: MaterialStateProperty.resolveWith(
// (states) {
// return purpleColor;
// },
// ),
),
),
),
SizedBox(
height: 40,
),
],
),
)
],
)
]),
),
);
}
}
More about ListView

Related

Unable to create a graph with syncfusion_flutter_charts in Flutter

I am able to draw a graph in Android emulator but that graph is not working in Android physical device. It is showing gray screen instead of graph.
(https://i.stack.imgur.com/eUpC5.png)(https://i.stack.imgur.com/BspZR.jpg)
#override
Widget build(BuildContext context) {
TextTheme _textTheme = Theme.of(context).textTheme;
// TODO: implement build
return SafeArea(
child: Scaffold(
backgroundColor: Colors.white,
body: Column(
children: [
SizedBox(
height: 20,
),
Padding(
padding: const EdgeInsets.fromLTRB(20, 10, 20, 10),
child: Row(
children: [
GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Icon(
Icons.arrow_back_ios,
color: Colors.blueAccent,
size: 20,
),
),
SizedBox(
width: 10,
),
Image.network(
widget.cryptoData.cryptoImage!,
height: 20,
width: 20,
// fit: BoxFit.fill,
),
SizedBox(
width: 6,
),
Text(widget.cryptoData.cryptoName!,
style: _textTheme.labelSmall),
SizedBox(
width: 2,
),
Text('(' + widget.cryptoData.cryptoSymbol! + ')',
style: _textTheme.titleMedium)
],
),
),
SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 20, 10),
child: Row(
children: [
Text(
"\$" +
limitDecimalToTwo(
widget.cryptoData.cryptoValue.toString()),
style: _textTheme.labelLarge),
SizedBox(
width: 20,
),
Text(
limitDecimalToTwo(
widget.cryptoData.cryptoValueChange.toString()),
style: TextStyle(
color: widget.cryptoData.cryptoValueChange
.toString()[0] ==
'-'
? Colors.red
: Colors.green,
fontSize: 14)),
],
),
),
Expanded(
flex: 4,
child: Container(
child: SfCartesianChart(
primaryXAxis: CategoryAxis(),
// primaryYAxis: CategoryAxis(
// isVisible: false,
// majorGridLines: const MajorGridLines(width: 0)),
series: <ChartSeries<CryptoData, String>>[
LineSeries<CryptoData, String>(
dataSource: cryptoDataList,
xValueMapper: (CryptoData crypto, _) =>
getDateInProperFormat(crypto.date),
yValueMapper: (CryptoData crypto, _) => crypto.value),
],
),
)),
SizedBox(
height: 20,
),
Padding(
padding: const EdgeInsets.all(15),
child: Expanded(
flex: 2,
child: CryptoRowWidget(
cryptoName: widget.cryptoData.cryptoName,
cryptoCode: widget.cryptoData.cryptoSymbol,
cryptoImage: widget.cryptoData.cryptoImage,
cryptoValue: widget.cryptoData.cryptoValue.toString(),
cryptoValueChange:
widget.cryptoData.cryptoValueChange.toString(),
cryptoQunatityAvailable: '')),
),
Padding(
padding: const EdgeInsets.all(15),
child: Expanded(
flex: 1,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(shape: StadiumBorder()),
onPressed: () {
showAlertDialog(context, _textTheme, 'Buy');
},
child: Padding(
padding: const EdgeInsets.fromLTRB(30, 10, 30, 10),
child: Text(
'Buy',
style: _textTheme.bodySmall,
))),
SizedBox(
width: 40,
),
ElevatedButton(
style: ElevatedButton.styleFrom(shape: StadiumBorder()),
onPressed: () {
showAlertDialog(context, _textTheme, 'Sell');
},
child: Padding(
padding: const EdgeInsets.fromLTRB(30, 10, 30, 10),
child: Text(
'Sell',
style: _textTheme.bodySmall,
))),
],
),
),
)
],
),
),
);
}
https://stackoverflow.com/a/72261344/6714054 You can find the answer for similar post but I don't have ListView as parent here.

How to fix button in end of the screen

Hi I have this UI and I want to set button in end of the screen. How can I do this?
This is my code. This code is show how I design this UI. I want to know how I can set button in end of screen.I set the up
TextField in padding To be spaced with the button.I try to increase the value of padding but it don't work good. Do I have other solution?
Container(
height: height,
width: width,
child: SingleChildScrollView(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Padding(
padding: const EdgeInsets.only(left: 15, right: 10, top: 30),
child: new InputField(
textController: receiverController,
hint: 'نام گیرنده پیام را وارد کنید',
label: 'گیرنده',
obscure: false,
icon: Icons.person_add_alt_1_outlined,
radius: 15,
),
),
SizedBox(
height: 10,
),
new Padding(
padding: const EdgeInsets.only(left: 15, right: 10),
child: new InputField(
textController: subjectController,
hint: 'عنوان پیام را وارد کنید',
label: ' عنوان ',
obscure: false,
icon: Icons.title,
radius: 15,
// suffixIcon: Icon(Icons.lock),
),
),
SizedBox(
height: 10,
),
new Padding(
padding: const EdgeInsets.only(left: 15, right: 10),
child: new InputField(
textController: textController,
// hint: 'پیام ',
label: ' متن',
obscure: false,
icon: Icons.message,
radius: 15,
// suffixIcon: Icon(Icons.lock),
),
),
new Padding(
padding: const EdgeInsets.all(80),
child: new ButtonTheme(
minWidth: width * .25,
height: 50,
child: new RaisedButton(
onPressed: () {
this.newmessageBloc.add(new NewmessageEventSend(
receiver: receiverController.text,
subject: subjectController.text,
text: textController.text));
},
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Text(
'ارسال',
style: new TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 16),
),
Icon(
Icons.send_rounded,
color: Colors.white,
),
],
),
color: new Color(0xff333399),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
)),
)

you can use Expanded widget on a Column and after that write you'r btn like this:
Column(
children: [
Expanded(
child: Container(
child: SingleChildScrollView(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Padding(
padding:
const EdgeInsets.only(left: 15, right: 10, top: 30),
child: Text(""),
),
SizedBox(
height: 10,
),
new Padding(
padding: const EdgeInsets.only(left: 15, right: 10),
child: Text(""),
),
SizedBox(
height: 10,
),
],
),
),
),
),
new Padding(
padding: const EdgeInsets.all(80),
child: new ButtonTheme(
minWidth: 25,
height: 50,
child: new RaisedButton(
onPressed: () {
// this.newmessageBloc.add(new NewmessageEventSend(
// receiver: receiverController.text,
// subject: subjectController.text,
// text: textController.text));
},
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Text(
'ارسال',
style: new TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 16),
),
Icon(
Icons.send_rounded,
color: Colors.white,
),
],
),
color: new Color(0xff333399),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
)),
),
],
)
sorry, I was forced to remove some part of code, because i didn't know about them.

The Tab-bar View Issues

Tab bar View
The Issues Which is if I try to add tab bar view it show Horizontal viewport was given unbounded height is there any other alternate for tab bar view to fix this issues
GitHub Link : https://github.com/RakulAgn/MyFlutterApp/blob/master/ui/lib/Pages/LandingPage.dart

Hi i checked your code you need to wrap your Scaffold with the DefaultTabController and then move forward to show tabs and tabview. I'm attaching the code for your reference please check.
return DefaultTabController(
length: 3,
child: Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
// child: Center(
child: Column(children: [
Expanded(
flex: 5,
child: Container(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(
width: 15,
),
Row(
children: [
SizedBox(height: 80),
customIconGoBack(context),
Row(
children: [
SizedBox(
width: 230,
),
customIconFav(),
],
)
],
)
],
),
SizedBox(
height: 280,
),
Row(
children: [
SizedBox(
height: 10,
width: 20,
),
Icon(
Icons.location_on_sharp,
color: Colors.white,
size: 25,
),
SizedBox(
width: 2,
),
Text(
"2.4km away",
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 12,
color: Colors.white,
),
),
],
),
SizedBox(
height: 5,
),
Row(
children: [
SizedBox(
height: 5,
width: 20,
),
Container(
child: Text(
'Bondi Beach',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 24,
color: Colors.white,
),
),
),
SizedBox(
width: 110,
),
Container(
height: 30,
margin: EdgeInsets.only(right: 20),
padding: EdgeInsets.only(left: 10),
width: 70,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Colors.black45,
),
child: Row(
children: [
Icon(
Icons.star_rounded,
color: Colors.white,
size: 25,
),
SizedBox(
width: 2,
),
Text(
"4.9",
style: TextStyle(color: Colors.white),
)
],
),
)
],
)
],
),
margin:
EdgeInsets.only(right: 18, left: 18, top: 15, bottom: 15),
padding: EdgeInsets.only(bottom: 15, top: 15),
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.5), BlendMode.dstOver),
image: AssetImage('./Assets/Bondi.jpg'),
),
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset(2, 2), //(x,y)
blurRadius: 5.0,
)
],
borderRadius: BorderRadius.circular(10),
),
height: MediaQuery.of(context).size.height / 1.7,
),
),
Container(
// height: 50,
child: Theme(
data: ThemeData(
splashColor: Colors.transparent,
highlightColor: Colors.transparent),
child: TabBar(
labelColor: Colors.black,
unselectedLabelColor: Colors.grey,
indicatorPadding: EdgeInsets.only(right: 16),
labelPadding: EdgeInsets.only(right: 16),
indicator: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5)),
tabs: [
Tab(
text: "Overview",
),
Tab(
text: "Reviews",
),
Tab(
text: "Friends",
),
],
),
),
),
Expanded(
child: TabBarView(
children: <Widget>[
Center(
child: Text("It's cloudy here",
style: textStyleRoboto(
textColor: ColorTheme.blackColor,
)),
),
Center(
child: Text("It's rainy here"),
),
Center(
child: Text("It's sunny here"),
),
],
),
),
]),
),
),
)),
);

Flutter Tabbar with ExpansionTile

Currently I'm trying to build ExpansionTile with TabBar, I create separately for each ExpansionTile, but when I combine it with tabbar, the expansiontile doesn't work properly maybe just look at the gif for a better understanding xD, what I am trying to do make it fluent with tabbar , maybe I missing something?
Because the code is to long and i got Body is limited to 30000 characters; you entered 39405. so a few code i copy into Pastebin
Without Tabbar
https://i.imgur.com/8fRGjku.gif
With Tabbar
https://i.imgur.com/gZ5f0X3.gif
This is the Code for the menuTwo
https://pastebin.com/CcL6VRPS
TabBar
https://pastebin.com/aBiyh1RN
ExpandedOne
https://pastebin.com/GgxCZrf8
ExpandedTwo
class ExpandedTwo extends StatefulWidget {
const ExpandedTwo({Key? key}) : super(key: key);
#override
_ExpandedTwoState createState() => _ExpandedTwoState();
}
class _ExpandedTwoState extends State<ExpandedTwo> {
#override
Widget build(BuildContext context) {
var _sizeScreen = Screen(MediaQuery.of(context).size);
var _sizeHeight = MediaQuery.of(context).size.height;
return Material(
child: Theme(
data: Theme.of(context).copyWith(accentColor: Colors.black),
child: ExpansionTile(
collapsedBackgroundColor: Colors.transparent,
backgroundColor: Colors.transparent,
title: Text(
'Expanded Two',
style: GoogleFonts.rubik(fontWeight: FontWeight.w500, fontSize: 14),
),
leading: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Color(0xFEFFFFFF), width: 3),
),
child: Center(
child: Icon(Icons.unsubscribe_sharp)),
),
children: [
Container(
padding: EdgeInsets.symmetric(horizontal: _sizeScreen.sizeWidth(15)),
color: Colors.white,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
alignment: Alignment.topLeft,
margin: EdgeInsets.fromLTRB(_sizeHeight / 65,
_sizeScreen.hp(2), 0, _sizeHeight / 97),
child: Text(
'Informasi',
style: GoogleFonts.nunitoSans(
fontStyle: FontStyle.normal,
fontWeight: FontWeight.w700,
fontSize: 16),
),
),
Divider(
thickness: 2,
color: Color(0xFEF6F6F6),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.only(top: _sizeScreen.sizeHeight(3)),
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Text('Header',style: GoogleFonts.nunitoSans(
fontSize: 14,
fontWeight: FontWeight.w700,
fontStyle: FontStyle.normal,
color: Colors.black
),),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Padding(
padding: EdgeInsets.fromLTRB(0,
_sizeScreen.sizeHeight(0),0,
_sizeScreen.sizeHeight(16)),
child: ElevatedButton(
onPressed: () {
print("Button");
},
style: ButtonStyle(
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40))),
padding: MaterialStateProperty.all<EdgeInsets>(
EdgeInsets.all(0.0))),
child: Ink(
decoration: const BoxDecoration(
color: Color(0xFEFFDD00),
borderRadius: BorderRadius.all(Radius.circular(40)),
),
child: Container(
constraints: const BoxConstraints(
minWidth: 100.0, minHeight: 40.0),
// min sizes for Material buttons
alignment: Alignment.center,
child: Text("Complete the Data",
style: GoogleFonts.nunitoSans(
fontSize: 16,
color: Colors.black,
fontWeight: FontWeight.w700,
fontStyle: FontStyle.normal)),
),
),
),
),
],
),
),
],
initiallyExpanded: false,
),
),
);
}
}
ExpandedThree
class ExpandedThree extends StatefulWidget {
const ExpandedThree({Key? key}) : super(key: key);
#override
_ExpandedThreeState createState() => _ExpandedThreeState();
}
class _ExpandedThreeState extends State<ExpandedThree> {
#override
Widget build(BuildContext context) {
var _sizeScreen = Screen(MediaQuery.of(context).size);
var _sizeHeight = MediaQuery.of(context).size.height;
return Material(
child: Theme(
data: Theme.of(context).copyWith(accentColor: Colors.black),
child: ExpansionTile(
collapsedBackgroundColor: Colors.transparent,
backgroundColor: Colors.transparent,
title: Text(
'Expanded Three',
style: GoogleFonts.rubik(fontWeight: FontWeight.w500, fontSize: 14),
),
leading: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Color(0xFEFFFFFF), width: 3),
),
child: Center(
child: Icon(Icons.home)),
),
children: [
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(children: [
Container(
color: Colors.white,
child: Column(
children: [
Container(
alignment: Alignment.topLeft,
margin: EdgeInsets.fromLTRB(_sizeHeight / 65,
_sizeScreen.hp(2), 0, _sizeHeight / 97),
child: Text(
'Source Information 1',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w500, fontSize: 16),
),
),
Container(
padding: EdgeInsets.fromLTRB(
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'Type Source',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w400, fontSize: 11),
),
Spacer(),
Text(
'Not Yet Filled',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w500,
fontSize: 11,
fontStyle: FontStyle.normal),
)
],
)),
Container(
padding: EdgeInsets.fromLTRB(
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'Source Information',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w400, fontSize: 11),
),
Spacer(),
Text(
'Not Yet Filled',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w500,
fontSize: 11,
fontStyle: FontStyle.normal),
)
],
)),
Container(
padding: EdgeInsets.fromLTRB(
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'Note',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w400, fontSize: 11),
),
Spacer(),
Text(
'Not Yet Filled',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w500,
fontSize: 11,
fontStyle: FontStyle.normal),
)
],
)),
Container(
alignment: Alignment.topLeft,
margin: EdgeInsets.fromLTRB(_sizeHeight / 65,
_sizeScreen.hp(2), 0, _sizeHeight / 97),
child: Text(
'Source Information 2',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w500, fontSize: 16),
),
),
Container(
padding: EdgeInsets.fromLTRB(
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'Source Type',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w400, fontSize: 11),
),
Spacer(),
Text(
'Not Yet Filled',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w500,
fontSize: 11,
fontStyle: FontStyle.normal),
)
],
)),
Container(
padding: EdgeInsets.fromLTRB(
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'Source Information Name',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w400, fontSize: 11),
),
Spacer(),
Text(
'Not Yet Filled',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w500,
fontSize: 11,
fontStyle: FontStyle.normal),
)
],
)),
Container(
padding: EdgeInsets.fromLTRB(
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'Note',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w400, fontSize: 11),
),
Spacer(),
Text(
'Not Yet Filled',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w500,
fontSize: 11,
fontStyle: FontStyle.normal),
)
],
)),
SizedBox(
height: _sizeScreen.sizeHeight(24),
),
Padding(
padding: EdgeInsets.fromLTRB(
_sizeScreen.sizeWidth(16),
_sizeScreen.sizeHeight(0),
_sizeScreen.sizeWidth(16),
_sizeScreen.sizeHeight(16)),
child: ElevatedButton(
onPressed: () {
print("Complete the Data");
},
style: ButtonStyle(
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8))),
padding: MaterialStateProperty.all<EdgeInsets>(
EdgeInsets.all(0.0))),
child: Ink(
decoration: const BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.all(Radius.circular(8)),
),
child: Container(
constraints: const BoxConstraints(
minWidth: 100.0, minHeight: 50.0),
// min sizes for Material buttons
alignment: Alignment.center,
child: Text("Complete the Data",
style: GoogleFonts.rubik(
fontSize: 16,
color: Colors.white,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal)),
),
),
),
),
],
),
),
],),
)
],
initiallyExpanded: false,
),
),
);
}
}

I Change height on Tabbar ( height: MediaQuery.of(context).size.height, child: TabBarView(children: [MenuOne(), MenuTwo()]), ) into fix Height for example 500
( height: 500, child: TabBarView(children: [MenuOne(), MenuTwo()]), ), that solve my problem, if I am using MediaQuery.of(context).size.height * number that's make the function scroll doesn't work
The alternative way , i have class for size for like
class Screen {
late Size screenSize;
Screen(this.screenSize);
double sizeHeight(height) {
double resultCalculation = screenSize.width / height;
return screenSize.height / resultCalculation;
}
double sizeWidth(width) {
double resultCalculation = screenSize.width / width;
return screenSize.width / resultCalculation;
}
double wp(percentage) {
return percentage / 100 * screenSize.width;
}
double hp(percentage) {
return percentage / 100 * screenSize.height;
}
double getWidthPx(int pixels) {
return (pixels / 3.61) / 100 * screenSize.width;
}
static bool isScreenLarge(double width, double pixel) {
return width * pixel >= 1440;
}
static bool isScreenMedium(double width, double pixel) {
return width * pixel < 1440 && width * pixel >= 1080;
}
static bool isScreenSmall(double width, double pixel) {
return width * pixel <= 720;
}
}
and i just need to call that for the height
var _sizeScreen = Screen(MediaQuery.of(context).size);
and do height: _sizeScreen.hp(70)

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

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.

Padding in ListView Flutter - android

Related

Unable to create a graph with syncfusion_flutter_charts in Flutter

How to fix button in end of the screen

The Tab-bar View Issues

Flutter Tabbar with ExpansionTile

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

Categories

Resources