What I'm trying to do is adding a bottom border of tabBar, so it will be under tabs title and above the indicatorColor and for both active and Inactive tabs, just like the attached image.
Red line is what I am trying to add, green line is the indicatorColor.
Note, usually I do this for appBar using 'bottom' but here bottom is reserved to the TabBar.
Is this possible?
Thanks a lot
You can set the AppBar shape property as abdulrahmanAbdullah says. But if you strictly need the border above the indicator, you can put it inside of each tab bar item. Here's one take on it:
import 'package:flutter/material.dart';
void main() {
runApp(TabBarDemo());
}
class TabBarDemo extends StatelessWidget {
Widget _createTab(String text) {
return Tab(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Container(
child: Center(child: Text(text)),
decoration: BoxDecoration(border: Border(bottom: BorderSide(color: Colors.black)))
)
),
]
),
);
}
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primaryColor: Colors.white,
),
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
elevation: 0,
bottom: TabBar(
labelPadding: EdgeInsets.all(0),
tabs: [
_createTab("Tab 1"),
_createTab("Tab 2"),
_createTab("Tab 3"),
],
),
title: Text('Tabs Demo'),
),
body: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
),
);
}
}
Try to set appBar border :
appBar: AppBar(
shape: Border(bottom: BorderSide(color: Colors.red)),
....
Simply you can wrap TabBar into DecoratedBox as below:
DecoratedBox(
decoration: BoxDecoration(
//This is for background color
color: Colors.white.withOpacity(0.0),
//This is for bottom border that is needed
border: Border(
bottom: BorderSide(color: AppColors.color4, width: 2.sp)),
),
child: TabBar(
...
),
),
Hope you will get help.
I managed to do that using 'flexibleSpace' property instead 'bottom' property, as flexibleSpace can have any widget not only 'PreferredSizeWidget' like bottom.
So I gave a Column to the flexibleSpace, then I was able to put TabBar and the container inside that column, then using Matrix4.translationValues(0.0, -2.6, 0.0) I gave the container, which contain the border, a nigative-padding(or similar) so it moved to the top of the indicatorColor.
return SafeArea(
top: true,
child: Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(100.0),
child: AppBar(
backgroundColor: Theme.of(context).buttonColor,
title: Text(
'AppBar',
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.title,
),
centerTitle: true,
elevation: 0.0,
flexibleSpace: Padding(
padding: const EdgeInsets.only(top: 50.0),
child: Column(
children: <Widget>[
// Tab Bar
new TabBar(
indicatorColor: Theme.of(context).accentColor,
tabs: <Tab>[
new Tab(
text: 'Tab1',
),
new Tab(
text: 'Tab2',
),
],
controller: _tabController,
),
// Border
Container(
// Negative padding
transform: Matrix4.translationValues(0.0, -2.6, 0.0),
// Add top border
decoration: BoxDecoration(
border: Border(
top: BorderSide(
color: Color(0xFFc3c3c3),
width: 0.6,
),
),
),
),
],
),
),
),
),
body: new TabBarView(
children: <Widget>[
new Tab1(),
new Tab2(),
],
controller: _tabController,
),
),
);
And the magic happened ^^
Another approach is to use a stack and place the line underneath the tabs
Stack(
alignment: Alignment.bottomCenter,
children: [
Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: Colors.white70, width: 1),
)),
),
TabBar(
indicatorWeight: 3.0,
tabs: [
Tab(
icon: Icon(Icons.home),
),
Tab(
icon: Icon(Icons.show_chart),
),
],
),
],
),
Here's my version of spenster's solution;
Instead of a function, I created a new widget "BorderedTab" which implements Tab:
import 'package:flutter/material.dart';
class BorderedTab extends StatelessWidget implements Tab {
const BorderedTab({
Key key,
this.text,
this.borderColor=Colors.grey,
this.width=0.5,
}) : super(key: key);
final String text;
final Color borderColor;
final double width;
#override
Widget build(BuildContext context) {
return Tab(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Container(
child: Center(
child: Text(text)
),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: width,
color: borderColor,
),
),
),
),
),
]
),
);
}
#override
// TODO: implement child
Widget get child => null;
#override
// TODO: implement icon
Widget get icon => null;
}
then I used BorderedTab just like the regular Tab, but with:
labelPadding: EdgeInsets.all(0.0), // Important to remove default padding
Final AppBar:
import 'package:../widgets/bordered_tab.dart';
...
appBar: AppBar(
backgroundColor: Theme.of(context).buttonColor,
title: Text(
'TabBar',
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.title,
),
centerTitle: true,
elevation: 0.0,
bottom: new TabBar(
labelColor: Theme.of(context).primaryColor,
indicatorColor:Theme.of(context).accentColor,
labelPadding: EdgeInsets.all(0.0), // Important to remove default padding
tabs: <Tab>[
BorderedTab(
text: 'Tab1',
borderColor: Color(0xFFc3c3c3),
),
BorderedTab(
text: 'Tab2',
borderColor: Color(0xFFc3c3),
),
],
controller: _tabController,
),
),
Use DecoratedBox and PreferredSize
First put TabBar inside of PreferredSize :
child: AppBar(
bottom: PreferredSize(
preferredSize: Size.fromHeight(50),
child: TabBar(
tabs: [
Tab(
text: 'tab-1',
),
Tab(
text: 'tab-2',
),
Tab(
text: 'tab-3',
),
],
),
),
),
then wrap TabBar with DecoratedBox
child: AppBar(
bottom: PreferredSize(
preferredSize: Size.fromHeight(50),
child: DecoratedBox(
decoration: BoxDecoration(
border: Border(bottom: BorderSide(width: 2,color: Color.fromARGB(255, 255, 0, 0)))
),
child: TabBar(
tabs: [
Tab(
text: 'tab-1',
),
Tab(
text: 'tab-2',
),
Tab(
text: 'tab-3',
),
],
),
),
),
),
Easiest way without using additional elements, is to use BoxShadow with TabBar like below:
TabBar(
controller: _tabController,
indicator: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.red,
offset: Offset(0, 2.0),
)
],
color: Colors.white,
),
labelColor: Colors.red,
unselectedLabelColor: Colors.grey.shade900,
labelPadding: EdgeInsets.symmetric(horizontal: 10.0),
isScrollable: false,
tabs: [
Tab(
text: 'T1',
),
Tab(
text: 'T2',
),
Tab(
text: 'T3',
),
Tab(
text: 'T4',
),
],
),
Or using UnderlineTabIndicator as indicator parameter of TabBar:
indicator: UnderlineTabIndicator(
borderSide: BorderSide(width: 3.0),
insets: EdgeInsets.symmetric(horizontal: 30.0),
),
Related
I am developing an app like TikTok where I want to display some text on top and bottom of a video that is scrollable using a PageView.
I want to add a linear gradient of [black-white-white-black] on the PageView.
I tried using a Container inside an Expanded Widget so that it takes the max height and added Linear Gradient in the BoxDecoration. But after putting a Container, the PageView is no longer scrollable.
I have attached the code below, if there is any other possible approach for getting that gradient please help me with that.
class FeedScreen extends StatefulWidget {
static const String id = 'FeedScreen';
const FeedScreen({Key? key}) : super(key: key);
#override
State<FeedScreen> createState() => _FeedScreenState();
}
class _FeedScreenState extends State<FeedScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
endDrawer: CategoriesDrawer(),
// drawer: MainDrawer(),
extendBodyBehindAppBar: true,
bottomNavigationBar: BottomBar(selectedIndex: 0),
appBar: AppBar(
actions: [
Builder(
builder: (context) => IconButton(
icon: const Icon(Icons.grid_view_outlined,
color: Colors.black, size: 24),
onPressed: () => Scaffold.of(context).openEndDrawer(),
tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
),
),
],
leading: const Image(
image: AssetImage(
'assets/images/logo.png',
),
height: 28,
),
toolbarHeight: 36,
elevation: 0,
backgroundColor: Colors.white,
),
body: SafeArea(
// top: false,
child: Stack(
alignment: Alignment.topCenter,
children: [
Container(
decoration: BoxDecoration(
// color: const Color(0xFF000000).withOpacity(0.5),
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0xFF000000).withOpacity(1),
Colors.transparent,
Colors.transparent,
Color(0xFF000000).withOpacity(1),
],
),
),
child: PageView(
scrollDirection: Axis.vertical,
children: const [
Feed(
video_url:
'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4'),
Feed(
video_url:
'https://citjos3.s3.ap-south-1.amazonaws.com/videos/1605781113_1369820376withSound.mp4'),
Feed(
video_url:
'https://citjos3.s3.ap-south-1.amazonaws.com/videos/1606913499_1670916107withSound.mp4'),
// Feed(video_url: 'https://citjos3.s3.ap-south-1.amazonaws.com/videos/1611855565_1738601504withSound.mp4'),
// Feed(video_url: 'https://citjos3.s3.ap-south-1.amazonaws.com/videos/1608188894_1415136971withSound.mp4'),
// Feed(video_url: 'https://citjos3.s3.ap-south-1.amazonaws.com/videos/1608189698_416483317withSound.mp4'),
// Feed(video_url: 'https://citjos3.s3.ap-south-1.amazonaws.com/videos/1608190662_1789437565withSound.mp4'),
// Feed(video_url: 'https://citjos3.s3.ap-south-1.amazonaws.com/videos/1608190955_1992811495withSound.mp4'),
// Feed(video_url: 'https://citjos3.s3.ap-south-1.amazonaws.com/videos/1608211397_1670759579withSound.mp4'),
// Feed(video_url: ''),
// Feed(video_url: ''),
],
),
),
Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 24),
decoration: BoxDecoration(
// color: const Color(0xFF000000).withOpacity(0.5),
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0xFF000000).withOpacity(1),
Colors.transparent,
Colors.transparent,
Color(0xFF000000).withOpacity(1),
],
),
),
child: Expanded(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
TextButton(
onPressed: () {},
child: Text(
'Subscribed',
style: TextStyle(
color: Colors.white,
fontSize: 18,
),
),
),
TextButton(
onPressed: () {},
child: Text(
'Global',
style: TextStyle(
color: Colors.white,
fontSize: 18,
),
),
),
TextButton(
onPressed: () {},
child: Text(
'Local',
style: TextStyle(
color: Colors.white,
fontSize: 18,
),
),
),
],
),
],
),
),
),
),
],
),
),
);
}
}
Wrap the overlay gradient widget with an IgnorePointer widget
I have three tab. One of the tab is for edit photo page (retrieve image which already have in API, edit and return capture image to API with Update button in that page). All is work and fine. But after capture image with camera, and change to other tab and return back to this tab (in this state not save), Already capture image not show and only API image show. I capture again to save. I want to remain the capture image in container although I don't save to API and change tab.
This is picture of my app contain tab bar view which contain edit image tab bar
This is my tab bar view dart file.
var width = MediaQuery.of(context).size.width;
final tabText = TextStyle(fontSize: width * 0.03);
return Scaffold(
appBar: new AppBar(
title: new Text(
'EDIT CLIENT',
style: new TextStyle(color: accentColor, fontFamily: 'Dosis'),
),
bottom: PreferredSize(
preferredSize: Size(40, 40),
child: Container(
height: getScreenHeightRation(40.0),
decoration: BoxDecoration(
color: Color(0xFFF0C185),
border: Border.all(color: Colors.grey[600]),
//0xFFF0C185
),
child: TabBar(
indicatorPadding: EdgeInsets.symmetric(horizontal: 40),
//isScrollable: true,
//change here
labelPadding: EdgeInsets.only(left: 10),
indicatorSize: TabBarIndicatorSize.tab,
indicatorColor: Colors.transparent,
indicator: BoxDecoration(
color: Color(0xFFD2A368),
),
tabs: [
Container(
decoration: BoxDecoration(
border: Border(right: BorderSide(color: Colors.grey))),
child: Tab(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ImageIcon(
AssetImage('assets/images/icon_ext/menu.png'),
size: 12,
),
SizedBox(
width: 5.0,
),
Text('Customer Data',style: tabText, ),
],
),
),
),
Container(
decoration: BoxDecoration(
border: Border(right: BorderSide(color: Colors.grey))),
child: Tab(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ImageIcon(
AssetImage('assets/images/icon_ext/image.png'),
size: 12,
),
SizedBox(
width: 5.0,
),
Text('Profile',style: tabText, )
],
),
),
),
Container(
child: Tab(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ImageIcon(
AssetImage('assets/images/icon_ext/placeholder.png'),
size: 12,
),
SizedBox(
width: 5.0,
),
Text('Location',style: tabText, )
],
),
),
)
],
controller: tabController,
),
),
),
iconTheme: new IconThemeData(color: accentColor),
centerTitle: true,
),
body: TabBarView(
controller: tabController,
children: [
EditClientInformation(
customerNo: widget.customerNo,
branchId: _branchId,
defaultBranchId: _defaultBranchId,
userId: _userId,
systemFormatDate: _systemFormatDate,
),
EditClientProfile(
customerNo: widget.customerNo,
branchId: _branchId,
defaultBranchId: _defaultBranchId,
userId: _userId,
systemFormatDate: _systemFormatDate,
),
EditClientMap(
customerNo: widget.customerNo,
branchId: _branchId,
defaultBranchId: _defaultBranchId,
userId: _userId,
systemFormatDate: _systemFormatDate,
),
],
),
);
}
This is capture image tab.
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Stack(
children: [
Container(
width: 300.0,
height: 170.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
border:
Border.all(width: 1, style: BorderStyle.solid),
),
child: Center(
child: Container(
width: 170.0,
height: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(20),
topLeft: Radius.circular(10),
bottomLeft: Radius.circular(10),
bottomRight: Radius.circular(10)),
//border: Border.all(width: 1, style: BorderStyle.solid),
image: DecorationImage(
image: _profileCaptImg == ""
? NetworkImage(_profileImg)
: FileImage(profile),
fit: BoxFit.cover,
),
),
),
),
),
Positioned(
right: 62.0,
top: 0.0,
child: _profileCaptImg != ''
? GestureDetector(
onTap: () {
setState(() {
profile = null;
_profileCaptImg = '';
});
},
child: Container(
width: 20.0,
height: 20.0,
child: Icon(
Icons.close,
color: Colors.white,
size: 20.0,
),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.black,
),
),
)
: Container(),
),
],
),
Container(
width: 50.0,
height: 50.0,
child: FloatingActionButton(
onPressed: profileImgPicker,
heroTag: null,
child: new Icon(Icons.camera_alt),
)),
],
),
Try this solution:
/// Add with AutomaticKeepAliveClientMixin:
class _YourWidgetState extends State<YourWidget> with AutomaticKeepAliveClientMixin {
/// Add these 2 lines:
#override
bool get wantKeepAlive => true;
/// Add super.build(context) to your build method
#override
Widget build(BuildContext context) {
super.build(context);
return YourWidgets();
}
}
I have a column inside a single child scroll view. I need to make my login screen scroll when I type using the keyboard because the keyboard hides the password text field.
class UserRegistration extends StatefulWidget {
#override
_UserRegistrationState createState() => _UserRegistrationState();
}
class _UserRegistrationState extends State<UserRegistration> {
#override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Color(0xFF6C62FF)
));
return SafeArea(
child: GestureDetector(
onTap: () => FocusScope.of(context).requestFocus(FocusNode()),
child: Scaffold(
resizeToAvoidBottomInset: false,
resizeToAvoidBottomPadding: false,
backgroundColor: Color(0xFF6C62FF),
body: SingleChildScrollView(
padding: EdgeInsets.symmetric(horizontal: 30),
child: Column([![enter image description here][1]][1]
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(child: FittedBox(child: Text('Welcome', style: TextStyle(fontFamily: 'SourceSans', fontSize: 50, fontWeight: FontWeight.w600, color: Color(0xFFFFD700)),))),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Register', style: TextStyle(fontFamily: 'SourceSans', fontSize: 40, fontWeight: FontWeight.w600, color: Colors.white)),
SizedBox(height: 5,),
Text('Start from today', style: TextStyle(fontFamily: 'SourceSans', fontSize: 25, letterSpacing: 1.5,fontWeight: FontWeight.w600, color: Colors.white), overflow: TextOverflow.ellipsis,),
],
),
),
Form(
child: Column(
children: [
EditTextNormal(hintText: 'Email', iconData: Icons.email, textInputType: TextInputType.emailAddress, validate: false, errorText: 'Enter your email',),
SizedBox(height: 20,),
EditTextObscure(hintText: 'Password', iconData: Icons.lock, textInputType: TextInputType.text, validate: false, errorText: 'Enter your password',),
SizedBox(height: 50,),
Container(
height: 50,
width: 180,
child: FlatButton(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)
),
onPressed: () {},
color: Colors.white,
child: Text('Register', style: TextStyle(color: Color(0xFF6C62FF), fontSize: 20), overflow: TextOverflow.ellipsis,),
),
)
],
),
),
Center(
child: RichText(
text: TextSpan(
children: <TextSpan>[
TextSpan(text: 'Login', style: TextStyle(color: Color(0xFFFFD700), letterSpacing: 1, wordSpacing: 1.5))
],
text: 'Have an account? ',
style: TextStyle(fontSize: 18, fontFamily: 'SourceSans', fontWeight: FontWeight.bold, letterSpacing: 1, wordSpacing: 1.5)
),
),
),
],
),
),
),
),
);
}
}
This is my code but here when I use a column inside a single child scroll view space evenly does not work. Please give me a solution.
My output:
Expected Output:
Try This
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
physics: NeverScrollableScrollPhysics(),
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: MediaQuery.of(context).size.width,
minHeight: MediaQuery.of(context).size.height,
),
child: IntrinsicHeight(
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
// CONTENT HERE
],
),
),
),
),
);
}
Add Container inside SingleChildScrollView and assign it height based on your keyboard open or not.
Add Dependency:
dependencies:
keyboard_visibility: ^0.5.6
Initialize keyboard listener in initState() for callback
bool _isKeyBoardShown = false;
#protected
void initState() {
super.initState();
KeyboardVisibilityNotification().addNewListener(
onChange: (bool visible) {
setState(() {
_isKeyBoardShown = visible;
});
},
);
}
Based on _isKeyBoardShown value decide whether to add additional height on the screen or not.
Container(
width: MediaQuery.of(context).size.width,
height: _isKeyBoardShown
? MediaQuery.of(context).size.height +
MediaQuery.of(context).size.height / 2
: MediaQuery.of(context).size.height,
child: Column(....)
)
Note: Use MediaQuery to decide additional height don't use hard-coded values
here I used MediaQuery.of(context).size.height / 2
is there a way to make sure that a widget keeps underneath the quick menu on android.
At the moment I do it in a kind of dirty way with a padding parameter, I hope there is a better solution.
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.only(top: 22.0),
color: Color(0xff757575),
child: Container(
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
buildHeader(),
Padding(
padding: const EdgeInsets.only(left: 40.0, right: 40.0),
child: TextField(
// cursorColor: Colors.red,
maxLines: null,
textAlign: TextAlign.left,
autofocus: false,
style: TextStyle(
fontSize: 20.0,
),
decoration: InputDecoration(
hintText: "Add title",
border: InputBorder.none,
),
),
),
Divider(
color: Colors.black,
),
SizedBox(
height: 20.0,
),
TimeAndDateCard(),
EventEntryCard(
label: 'Add Location',
icon: Icon(Icons.place),
onLongPress: () {
showSearch(delegate: LocationSearch(), context: context);
},
),
EventEntryCard(
icon: Icon(Icons.people),
label: 'Invite people ',
),
EventEntryCard(
icon: Icon(Icons.attachment),
label: 'Add attachment',
),
EventEntryCard(
icon: Icon(Icons.work),
label: 'Status',
),
],
),
),
);
}
}
layout without padding
Wished layout. Container is underneath the statusbar
Wrap your Container with SafeArea and it will do the magic for you..
Widget build(BuildContext context) {
return SafeArea(
child: Container(),
);
}
Hope it answers your question..
When I design this app layout in device with larger display It works perfectly fine(1920 x 1080) But when I run app in device with smaller screen bottom buttons are not showing..What can I do for this? Is mediaquery support for column widget...? Should I have to use another method instead of Mediaquery?
This is main dart....//Run app not included//
return ResponsiveWidget(
builder: (context,constraints){
return Stack(
children: <Widget>[
new Container(
decoration:new BoxDecoration(
image: new DecorationImage(
image: new AssetImage(_Image()()),
fit: BoxFit.cover,
),
),
),
Scaffold(
backgroundColor:Colors.transparent,
appBar:AppBar(
backgroundColor:Colors.transparent,
elevation:0.0,
),
drawer:Drawer(
child: ListView(
children: <Widget>[
DrawerHeader(
child: Text('Drawer Header',
style:TextStyle(
fontSize: 30.0,
),
),
decoration: BoxDecoration(
color: Colors.green[300],
),
)],
),
),
body:Column(
children: <Widget>[
Row(
crossAxisAlignment:CrossAxisAlignment.center,
mainAxisAlignment:MainAxisAlignment.spaceEvenly,
children: <Widget>[
SizedBox(width:10,height:10,),
Text(
"NAME",
style:TextStyle(
fontSize:40.0,
fontWeight:FontWeight.bold,
color:Colors.white,
),
),
SizedBox(width:10),
],
),
SizedBox(height:20),
GestureDetector(
onTap:(){
print("Clicked");
},
child: CircleAvatar(
radius:80,
backgroundImage:_decideImageView(),
),
),
SizedBox(height: 30,),
Text("Text",
style:TextStyle(
fontStyle:FontStyle.italic,
fontSize:15,
color:Colors.white,
),
),
SizedBox(height: 10,),
Text("Text",
style:TextStyle(
fontFamily:'mrsmonster',
fontSize:20,
color:Colors.white,
),
),
SizedBox(height:50,),
FlatButton(child:Text(
"TExt",
style:TextStyle(
fontWeight:FontWeight.bold,
fontSize:30,
color:Colors.white,
),
),
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
//side: BorderSide(color: Colors.red)
),
color:Hexcolor('#149da5'),
padding:EdgeInsets.fromLTRB(30, 20, 30, 20),
onPressed: (){
setState(() {});
},
),
SizedBox(height:10,),
FlatButton(child:Text(
"Text",
style:TextStyle(
fontWeight:FontWeight.bold,
fontSize:30,
color:Colors.white,
),
),
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
//side: BorderSide(color: Colors.red)
),
color:Hexcolor('#f4856b'),
padding:EdgeInsets.fromLTRB(30, 20, 30, 20),
onPressed: (){
setState(() {});
},
),
],
),
)
]
);
);
This is Responsive Widget
import 'package:app/SizeInformation.dart';
import 'package:flutter/material.dart';
class ResponsiveWidget extends StatelessWidget {
final AppBar appBar;
final Drawer drawer;
final Widget Function(BuildContext context,SizeInformation constraints) builder;
ResponsiveWidget({#required this.builder,this.appBar,this.drawer});
#override
Widget build(BuildContext context) {
var width = MediaQuery.of(context).size.width;
var height = MediaQuery.of(context).size.height;
var orientation = MediaQuery.of(context).orientation;
SizeInformation information = SizeInformation(width,height,orientation);
return Stack(children: <Widget>[
Scaffold(
drawer:drawer,
appBar:appBar,
body: builder(context,information),
),
]
);
}
}
You should use Stack inside a Scaffold body and not wrapping Scaffold with Stack. You have to use only one Scaffold in one screen. What you've done is just wrong... No wander it is not working. Whatever is in scaffold body will be automatically adjusted to your screen resolution... therefore no need to do it manually. Here is a question how to set background image without using Stack widget Flutter SDK Set Background image so there is no need to even use Stack