I have a page with a DefaultTabController that is:
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
resizeToAvoidBottomPadding: true,
appBar: AppBar(
bottom: TabBar(
indicatorColor: Colors.red,
indicator: BoxDecoration(
color: buttonColor,
),
tabs: [Tab(text: "Login"), Tab(text: "Register", key: Key("tabRegistro"))],
),
centerTitle: true,
title: Text(appBarTitle)),
body: TabBarView(
children: [
new LoginPage(),
new RegisterPage(),
],
),
),
);
}
And for example, the LoginPage build is:
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: true,
key: _scaffoldKey,
body: SingleChildScrollView(
child: GestureDetector(
onTap: () {
FocusScope.of(context).unfocus();
},
child: Center(
child: Container(
color: backgroundColor,
child: Padding(
padding: const EdgeInsets.all(36.0),
child: Form(
key: formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 155.0,
child: Image.asset(
"assets/images/pet.PNG",
fit: BoxFit.contain,
),
),
SizedBox(height: 20.0),
emailField,
SizedBox(height: 10.0),
passwordField,
SizedBox(height: 20.0),
loginButon,
SizedBox(height: 20.0),
GoogleSignInButton(
darkMode: true,
text: "Login with Google",
onPressed: () {
_sigIn();
}),
],
),
)),
),
),
)));
}
But when I'm writing, the keyboard cover the Textfields and they aren't visible.
With SingleChildScrollView before it works, but now it doesn't work propertly. I have tried to put resizeToAvoidBottomPadding: true but it doesn't work. What could I do to fix this problem?
The code is Ok, the problem is at Android.manifest.xml. I'm using Android Simulator and to hide the status bar I put these line:
android:theme="#android:style/Theme.Holo.NoActionBar.Fullscreen"
If i put the original line it works. The original line is:
android:theme="#style/LaunchTheme"
Related
I am relatively new to flutter/dart and I want to programmatically open a drawer when a user taps on the hamburger menu on my custom appbar. However, after implementing the following code,
profile_page.dart
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: CustomScrollView(
slivers: [
SliverAppBar(
floating: false,
pinned: true,
primary: true,
flexibleSpace: TopBar(
title: "Profile",
hasBackButton: false,
hasHamburgerMenu: true,
openDrawer: () {
Scaffold.of(context).openEndDrawer();
},
),
collapsedHeight: 180,
expandedHeight: 180,
backgroundColor: Color.fromRGBO(250, 250, 250, 1),
)
],
)),
endDrawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
DrawerHeader(
decoration: BoxDecoration(color: Theme.of(context).accentColor),
child: Text("Drawer Header")),
ListTile(
title: Text("Test 1"),
onTap: () {
Navigator.pop(context);
},
)
],
)));
}
top_bar.dart
Widget build(BuildContext context) {
return Container(
child: Padding(
padding: const EdgeInsets.only(top: 25.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
if (hasBackButton ?? true)
Container(
child: GestureDetector(
child: Image(
image: AssetImage("assets/images/previous.png"),
color: Theme.of(context).accentColor,
width: 25,
height: 25),
onTap: onPressed,
),
)
else
Text(""),
Text(""),
Text(title ?? "Top Bar",
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.w800,
color: Theme.of(context).accentColor)),
Text(""),
if (hasHamburgerMenu ?? false)
InkWell(
onTap: openDrawer, child: Icon(Icons.menu))
else
Text("")
],
),
),
);
}
My interface shows that the openEndDrawer() is tagged to an "imaginary" AppBar hamburger menu button instead of my hamburger menu icon, as seen in the below screengrab.
The hamburger menu in white that is responding to the onTap() is not coded in my app at all.
Glad if I could get any form of assistance on this. Thanks!
End Drawer is part of the Scaffold so you can open the Drawer like this:
Scaffold.of(context).openEndDrawer();
I'm beginner in flutter and programming, want To set counter that count images number when it scroll down and also tell remaining pages instead of hardcoded text('1/6'). here it's code
int counter=0;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.purple,
title: Center(
child: Text('Surah Yaseen' ' (1/6) ', style: TextStyle(fontSize: 30.0),
),
),
),
body: PageView(
scrollDirection: Axis.vertical,
allowImplicitScrolling: true,
children: [
Container(
child: Image.asset('images/1.jpg'),
),
Container(
child: Image.asset('images/2.jpg'),
),
Container(
child: Image.asset('images/3.jpg'),
),
Container(
child: Image.asset('images/4.jpg'),
),
Container(
child: Image.asset('images/5.jpg'),
),
Container(
child: Image.asset('images/6.jpg'),
)
],
),
);
}
}
Try this:
final controller = PageController(
initialPage: 0,
);
final _currentPageNotifier = ValueNotifier<int>(0);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.purple,
title: Center(
child: Text('Surah Yaseen' ' (${_currentPageNotifier.value}/6) ', style: TextStyle(fontSize: 30.0),
),
),
),
body: PageView(
scrollDirection: Axis.vertical,
allowImplicitScrolling: true,
onPageChanged: (index) {
setState(() {
_currentPageNotifier.value = index+1;
});
},
controller: controller,
children: [
Container(
child: Image.asset('images/1.jpg'),
),
Container(
child: Image.asset('images/2.jpg'),
),
Container(
child: Image.asset('images/3.jpg'),
),
Container(
child: Image.asset('images/4.jpg'),
),
Container(
child: Image.asset('images/5.jpg'),
),
Container(
child: Image.asset('images/6.jpg'),
)
],
),
);
}
The Drawer work perfectly, but after I add tab bar in the main page. The navigator from drawer to other page get error 'noSuchMethodError: the method '*' was called on null'. I mean, when click the listTile from drawer. It lead to that error.
This is my code
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: getTitleFontColor(),
centerTitle: true,
title: appBarTitle,
),
drawer: new Drawer(
child:
_drawerLeft(context),
),
body:
new DefaultTabController(
length: 3,
child: new Scaffold(
appBar: new AppBar(
actions: <Widget>[],
title:
TabBar(
isScrollable: true,
unselectedLabelColor: Colors.white.withOpacity(0.3),
indicatorColor: Colors.white,
tabs: [
Tab(
child: Text('A'),
),
Tab(
child: Text('B'),
),
Tab(
child: Text('C'),
),
]
),
),
body: TabBarView(
children: <Widget>[
Container(
//A,
),
Container(
child: ListView(
children:<Widget>[
Column(children: <Widget>[
// B,
],)
])
),
Container(
child: ListView(
children:<Widget>[
Column(children: <Widget>[
// C
],)
])
),
],
),
)
),
// ),
);
}
My _drawerLeft()
return Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ListTile(
leading: Icon(Icons.credit_card,color: getTitleFontColor()),
title: Text(
"A",
style: TextStyle(
color: getTitleFontColor(), fontSize: 16
)
),
onTap: () => {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => APage()),
),
},
),
])
Is it I use the navigator wrong? Can someone help please.
I'm trying to implement a custom tab bar widget inside a SliverAppBar. So far I've tried wrapping my CustomTabBar within a PreferredSize widget.
Here's my code:
Widget _buildBody(){
return NestedScrollView(
headerSliverBuilder: (BuildContext context, bool boxIsScrolled) {
return <Widget>[
SliverAppBar(
leading: Container(),
backgroundColor: Colors.transparent,
expandedHeight: 200.0,
flexibleSpace: FlexibleSpaceBar(
collapseMode: CollapseMode.pin,
background: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text(
"Item 1"
),
Text(
"Item 2"
),
Text(
"Item 3"
)
],
)
]),
),
bottom: PreferredSize(
preferredSize: Size.fromHeight(kToolbarHeight),
child: CustomTabWidget(
items: ['Challenge', 'My friends'],
activeColor: secondaryColor,
currentIndex: currentIndex,
backgroundColor: tabColor,
activeTextColor: Colors.white,
backgroundTextColor: Colors.white,
onTabSelect: (int index) {
onLeaderboardTabSelect(index);
},
),
),];
},
body: ListView.separated(
itemCount: 50,
itemBuilder: (context, index) {
return ListTile(
title: Text('row $index'),
);
},
separatorBuilder: (context, index) {
return Divider();
},
) // should return listview depending on the tab
);
}
CustomTabWidget
Widget build(BuildContext context) {
return Container(
height: height,
decoration: BoxDecoration(
color: backgroundColor,
borderRadius: BorderRadius.circular(
30.0,
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: _buildItems(context),
),
);
}
The code successfully shows the my custom tab bar widget but whenever I scroll down or tap another tab, it disappears.
I might have overlooked something within the code.
Can anyone help me?
this work on my project
class TabBarInSliverAppbar extends StatelessWidget {
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
title: Text("Tabbar in SliverAppbar Example"),
pinned: true,
floating: true,
bottom: TabBar(
tabs: <Widget>[
Tab(
text: "First Tab",
),
Tab(
text: "Second Tab",
),
],
),
),
SliverToBoxAdapter(
child: TabBarView(
children: <Widget>[
Center(
child: Text("First Tab"),
),
Center(
child: Text("Second Tab"),
),
],
),
),
],
),
),
);
}
}
you can also checki this link :Flutter TabBar and SliverAppBar that hides when you scroll down
I am trying to set up a SliverAppBar in a CustomScrollView using Flutter, and can't get to vertically center the title.
I already tried this solution (and this SO question is exactly what I want to do) but fortunately, it didn't work for me.
Here is my build method:
#override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
pinned: true,
expandedHeight: 200,
//backgroundColor: Colors.transparent,
flexibleSpace: FlexibleSpaceBar(
titlePadding: EdgeInsets.zero,
centerTitle: true,
title: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text("Should be centered", textAlign: TextAlign.center),
],
),
background: Image.asset("assets/earth.jpg", fit: BoxFit.cover),
),
actions: <Widget>[
IconButton(
icon: const Icon(Icons.menu),
tooltip: "Menu",
onPressed: () {
// onPressed handler
},
),
],
),
SliverFixedExtentList(
itemExtent: 50,
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.green,
child: Text("Index n°$index"),
);
},
),
)
],
),
);
}
I really don't understand what is wrong and why it isn't centered. I observed that the column is way too big when setting mainAxisSize to mainAxisSize.max.
Any idea?
Thanks in advance!
I tinkered around a bit in your code and was able to center it. So the main problem here was the expandedHeight. This height expands the SliverAppBar both upwards and downwards meaning that half of that 200 was always above the screen. Taking that into consideration, you would be trying to center the text in only the bottom half of the app bar. The simplest way was to just use Flexible to size the items relative to their container. Here's the working code:
#override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
pinned: true,
expandedHeight: 200,
//backgroundColor: Colors.transparent,
flexibleSpace: FlexibleSpaceBar(
titlePadding: EdgeInsets.zero,
centerTitle: true,
title: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
flex: 3,
child: Container(),
),
Flexible(
flex: 1,
child:
Text("Should be centered", textAlign: TextAlign.center),
),
Flexible(
flex: 1,
child: Container(),
),
],
),
background: Image.asset("assets/earth.png", fit: BoxFit.cover),
),
actions: <Widget>[
IconButton(
icon: const Icon(Icons.menu),
tooltip: "Menu",
onPressed: () {
// onPressed handler
},
),
],
),
SliverFixedExtentList(
itemExtent: 50,
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.green,
child: Text("Index n°$index"),
);
},
),
)
],
),
);
}
A way without empty containers
#override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
pinned: true,
expandedHeight: 200,
flexibleSpace: FlexibleSpaceBar(
titlePadding: EdgeInsets.zero,
centerTitle: true,
title: SizedBox(
height: 130,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Should be centered", textAlign: TextAlign.center),
],
),
),
background: Image.asset("assets/earth.png", fit: BoxFit.cover),
),
actions: <Widget>[
IconButton(
icon: const Icon(Icons.menu),
tooltip: "Menu",
onPressed: () {
// onPressed handler
},
),
],
),
SliverFixedExtentList(
itemExtent: 50,
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.green,
child: Text("Index n°$index"),
);
},
),
)
],
),
);
}
Instead of using a FlexibleSpaceBar use a different Widget.
flexibleSpace: Padding(
padding: EdgeInsets.all(4),
child: Container(),
}),
),
Kinda like what Pedro said earlier, you can instead use the flexibleSpace parameter in SliverAppBar, and then center things from there. This is what I did.
SliverAppBar(
flexibleSpace: Center(
child: Text("27 is my favorite number")
)
)