Flutter Tabbar with ExpansionTile
136
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)
Author by
Admin
Updated on December 30, 2022Comments
-
Admin over 1 year
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 Pastebinhttps://i.imgur.com/8fRGjku.gif
https://i.imgur.com/gZ5f0X3.gif
This is the Code for the menuTwo
https://pastebin.com/CcL6VRPSTabBar
https://pastebin.com/aBiyh1RNExpandedOne
https://pastebin.com/GgxCZrf8ExpandedTwo
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, ), ), ); } }-
Admin almost 3 yearsI Change height on Tabbar ( height: MediaQuery.of(context).size.height, child: TabBarView(children: [MenuOne(), MenuTwo()]), ) into fix Height for example 500 , that solve my problem, if I am using mediaquery * number that's make the function scroll doesn't work
-