The Tab-bar View Issues - android

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

Related

Padding in ListView Flutter

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

How do i make the last widget always be at the bottom of the screen?

So i'm currently creating a detail page. Im trying to get a particular look and ive tried quite a few different approach such as using expanded Slivefill but im unable to get the desired look.
From the above image, From the left the first case is acceptable as there is a larger amount of text, the second image is where i have a problem. im trying to get it the very least fill to bottom of the screen.
the last image is the ideal condition i would like to achieve if there is a smaller amount of data.
if anybody could assist or point me to the right direction it would be highly appreciated
Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
bottom: PreferredSize(
preferredSize: const Size(0, 1),
child: Container(),
),
pinned: false,
expandedHeight: MediaQuery.of(context).size.height * 0.4,
centerTitle: true,
flexibleSpace: Stack(
children: [
Positioned(
child: FlexibleSpaceBar(
background: Image.network(
loadedEvent.imageUrl,
fit: BoxFit.cover,
),
),
),
Positioned(
bottom: -1,
left: 0,
right: 0,
child: Container(
height: 20,
decoration: const BoxDecoration(
color: Color(0xfffffcf2),
borderRadius: BorderRadius.vertical(
top: Radius.circular(20),
),
),
),
),
],
),
),
SliverToBoxAdapter(
child: SingleChildScrollView(
child: Container(
color: Color(0xfffffcf2),
child: ListView(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
padding: const EdgeInsets.all(20.0),
children: [
Text(
loadedEvent.title,
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold,
letterSpacing: 1.0,
),
),
Spacer(),
Flexible(
fit: FlexFit.tight,
flex: 8,
child: RichText(
text: TextSpan(
style: const TextStyle(
color: Colors.black,
fontSize: 18.0,
),
text: loadedEvent.description,
),
),
),
Spacer(),
Flexible(
fit: FlexFit.loose,
child: Container(
color: Colors.black,
child: Text(loadedEvent.date),
),
),
],
),
),
),
),
],
),
);

Is this what you want to achieve?
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
CustomScrollView(
slivers: [
SliverAppBar(
bottom: PreferredSize(
preferredSize: const Size(0, 1),
child: Container(),
),
pinned: false,
expandedHeight: MediaQuery.of(context).size.height * 0.4,
centerTitle: true,
flexibleSpace: Stack(
children: [
Positioned(
child: FlexibleSpaceBar(
background: Image.network(
loadedEvent.imageUrl,
fit: BoxFit.cover,
),
),
),
Positioned(
bottom: -1,
left: 0,
right: 0,
child: Container(
height: 20,
decoration: const BoxDecoration(
color: Color(0xfffffcf2),
borderRadius: BorderRadius.vertical(
top: Radius.circular(20),
),
),
),
),
],
),
),
SliverToBoxAdapter(
child: Container(
color: const Color(0xfffffcf2),
height: MediaQuery.of(context).size.height,
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
Text(
loadedEvent.title,
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold,
letterSpacing: 1.0,
),
),
const Spacer(),
Flexible(
fit: FlexFit.tight,
flex: 8,
child: RichText(
text: TextSpan(
style: const TextStyle(
color: Colors.black,
fontSize: 18.0,
),
text: loadedEvent.description,
),
),
),
const Spacer(),
],
),
),
),
],
),
Positioned(
bottom: 0.0,
child: Container(
color: Colors.black,
padding: const EdgeInsets.all(8.0),
width: MediaQuery.of(context).size.width,
child: Text(
loadedEvent.date,
style: const TextStyle(
color: Colors.white,
),
textAlign: TextAlign.center,
),
),
),
],
),
);
}

You can use flexible widget to the previous widget to set last widget to end of the screen. But you can't use scrollview otherwise ypu will get an error.

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

Does my app meet standards for resizing for different screen sizes and ratios/PPI? Playstore ready?

So, I've been working on a Flutter app for a while now and I think I want to publish my first app. All the mechanics work well but I am worried it won't resize properly or meet the Playstore's standards.
I've read all the Playstore docs and they say that your app should resize to every device... does the review process when you submit your app enable the team to check if it fits for different devices and check which ones it doesn't work on?
I am also worried about padding... what happens if the user installs my app on a phone 20 pixels wide and my padding horizontally is 25... it would totally break! Is this just unrealistic worrying?
I've really simplified my code for my UI of my app below and wondering if there is anything that is obviously messing with the resizing or would make it not work. I've tested it on all my families physical devices and it seems to work so far... but I really am unsure. Any help/insight is greatly appreciated!
(Sorry if my question is stupid)
Main Screen:
import 'package:flutter/material.dart';
class SOTest extends StatefulWidget {
#override
_SOTestState createState() => _SOTestState();
}
class _SOTestState extends State<SOTest> {
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
resizeToAvoidBottomPadding: false,
backgroundColor: Colors.lightBlueAccent,
body: Container(
color: Colors.lightBlueAccent,
child: Stack(
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 10, right: 10, bottom: 10, top: 10),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(bottom: 10, top: 10),
child: Container(
height: MediaQuery.of(context).size.width * 1.15 -
MediaQuery.of(context).size.width,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
InkWell(
child: Container(
padding: EdgeInsets.only(top: 5, bottom: 5, right: 5, left: 5),
height: MediaQuery.of(context).size.width * 1.15 -
MediaQuery.of(context).size.width,
width: MediaQuery.of(context).size.width / 5,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(15),
),
boxShadow: [
BoxShadow(
color: Colors.black54,
offset: Offset(2, 1),
blurRadius: 10,
),
],
),
child: Center(
child: FittedBox(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Level',
style: TextStyle(
fontFamily: 'Ub',
color: Colors.grey,
fontSize: 35),
),
Text(
'15',
style: TextStyle(
fontFamily: 'Ub',
color: Colors.indigoAccent,
fontWeight: FontWeight.bold,
fontSize: 50),
),
],
),
),
),
),
),
Padding(
padding: EdgeInsets.only(left: 10),
child: InkWell(
child: Container(
height: MediaQuery.of(context).size.width * 1.15 -
MediaQuery.of(context).size.width,
width: MediaQuery.of(context).size.width / 8,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(15),
),
boxShadow: [
BoxShadow(
color: Colors.black54,
offset: Offset(2, 1),
blurRadius: 10,
),
]),
child: Center(child: Icon(Icons.chevron_right, size: MediaQuery.of(context).size.width / 9, color: Colors.indigoAccent,),),
),
),
),
],
),
Expanded(
child: Container(
child: Center(
child: FittedBox(
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(right: 45),
child: Text(
'Pattern',
textScaleFactor: 1,
textAlign: TextAlign.left,
style: TextStyle(
fontFamily: 'Pacifico',
fontSize: MediaQuery.of(context).size.width / 10,
color: Colors.white),
),
),
Padding(
padding: EdgeInsets.only(left: 45),
child: Text(
'Cracker',
textScaleFactor: 1,
textAlign: TextAlign.left,
style: TextStyle(
fontFamily: 'Pacifico',
fontSize: MediaQuery.of(context).size.width / 10,
color: Colors.white),
),
),
],
),
),
),
),
),
Container(
padding: EdgeInsets.only(top: 5, bottom: 5, left: 5, right: 5),
height: MediaQuery.of(context).size.width * 1.15 -
MediaQuery.of(context).size.width,
width: MediaQuery.of(context).size.width / 5,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(15),
),
boxShadow: [
BoxShadow(
color: Colors.black54,
offset: Offset(2, 1),
blurRadius: 10,
),
],
),
child: Center(
child: FittedBox(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Attempts',
style: TextStyle(
fontFamily: 'Ub',
color: Colors.grey,
fontSize: 35),
),
Text(
'1',
style: TextStyle(
fontFamily: 'Ub',
color: Colors.indigoAccent,
fontWeight: FontWeight.bold,
fontSize: 50),
),
],
),
),
),
),
],
),
),
),
Stack(
children: <Widget>[
Center(
child: Container(
height: MediaQuery.of(context).size.width,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(10),
),
boxShadow: [
BoxShadow(
color: Colors.black54,
offset: Offset(2, 1),
blurRadius: 10,
),
]),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
NumSquare(),
NumSquare(),
NumSquare(),
NumSquare(),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
NumSquare(),
NumSquare(),
NumSquare(),
NumSquare(),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
NumSquare(),
NumSquare(),
NumSquare(),
NumSquare(),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
NumSquare(),
NumSquare(),
NumSquare(),
NumSquare(),
],
),
],
),
),
),
],
),
],
),
),
),
],
),
),
);
}
}
NumSquare refers to:
InkWell(
child: Container(
width: MediaQuery.of(context).size.width / 6,
height: MediaQuery.of(context).size.width / 6,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(
Radius.circular(10),
),
boxShadow: [
BoxShadow(
color: Colors.black54,
offset: Offset(2, 1),
blurRadius: 10,
),
]),
child: Center(
child: Text(
'16',
textScaleFactor: 1,
style: TextStyle(
color: Colors.white,
fontFamily: 'Ub',
fontSize: MediaQuery.of(context).size.width / 12),
),
),
),
);

As far as I know, and based on personal experience the review process for the play store simply checks if your apk is malware free. The design itself will not factor into whether the app is accepted for publishing or not.

Categories

Resources