I need change appbar height in my flutter app. I use this code:
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(100.0),
child: AppBar(
automaticallyImplyLeading: false,
flexibleSpace: Container(),
centerTitle: true,
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(Icons.search),
Icon(Icons.home),
PopupMenuButton<String>(
icon: Icon(Icons.menu),
itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
PopupMenuItem<String>(
value: "1",
child: Text('Hello'),
),
PopupMenuItem<String>(
value: "2",
child: Text('World'),
),
]
)
],
),
),
),
body: Container());
}
this is my result:
The height has changed but I need to align the content vertically in the center.
I try this options, but it not working:
automaticallyImplyLeading: false,
flexibleSpace: Container(),
centerTitle: true,
Any advises?
Set PreferredSize wrapping AppBar. Then set AppBar's toolBarHeight field matching to preferredSize.
appBar: PreferredSize(preferredSize: const
Size.fromHeight(120.0),
child: AppBar(
toolbarHeight: 120.0,
automaticallyImplyLeading: false,
flexibleSpace: Container(),
centerTitle: true,
backgroundColor: Colors.transparent,
elevation: 0,
shape: const Border(
bottom: BorderSide(width: 1, color: Colors.black12),
),
)
Try this
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(100.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
AppBar(
elevation: 0.0,
automaticallyImplyLeading: false,
flexibleSpace: Container(),
centerTitle: true,
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(Icons.search),
Icon(Icons.home),
PopupMenuButton<String>(
icon: Icon(Icons.menu),
itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
PopupMenuItem<String>(
value: "1",
child: Text('Hello'),
),
PopupMenuItem<String>(
value: "2",
child: Text('World'),
),
]
)
],
),
),
],
),
),
body: Container());
}
https://dartpad.dartlang.org/115b02f36456fe9579cb8daf092bd906
class MyAppBar extends StatelessWidget with PreferredSizeWidget {
final double appBarHeight = 120.0;
#override
get preferredSize => Size.fromHeight(appBarHeight);
#override
Widget build(BuildContext context) {
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
AppBar(
automaticallyImplyLeading: false,
elevation: 0,
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(Icons.search),
Icon(Icons.home),
PopupMenuButton<String>(
icon: Icon(Icons.menu),
itemBuilder: (BuildContext context) =>
<PopupMenuEntry<String>>[
PopupMenuItem<String>(
value: "1",
child: Text('Hello'),
),
PopupMenuItem<String>(
value: "2",
child: Text('World'),
),
],
),
],
),
),
],
),
decoration: BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black54,
blurRadius: 15.0,
offset: Offset(0.0, 0.75))
],
color:
ThemeData.dark().appBarTheme.color ?? ThemeData.dark().primaryColor,
),
);
}
}
Try out this
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(100.0),
child: AppBar(
automaticallyImplyLeading: false,
flexibleSpace: Container(),
centerTitle: true,
title: Padding(
padding: const EdgeInsets.only(top:25.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(Icons.search),
Icon(Icons.home),
PopupMenuButton<String>(
icon: Icon(Icons.menu),
itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
PopupMenuItem<String>(
value: "1",
child: Text('Hello'),
),
PopupMenuItem<String>(
value: "2",
child: Text('World'),
),
]
)
],
),
),
),
)
),
);
}
Related
Hi Guys I locking for create app bar Like this with SliverAppBar() widget Like this :
And I Tried to make it With SliverAppBar() But The output is like this :
Here is Code :
Scaffold(
drawer: const Drawer(),
body: CustomScrollView(
slivers: [
SliverAppBar(
pinned: true,
elevation: 0,
backgroundColor: Colors.grey.shade200,
title: Text(
"All notes",
style: AppStyle.normalTextStyle
.copyWith(fontWeight: FontWeight.w600),
),
actions: [
IconButton(
onPressed: () => Get.to(() => SearchBar(notes: notes)),
icon: const Icon(Icons.search)),
IconButton(
onPressed: () {},
icon: const Icon(Icons.more_vert_outlined))
],
expandedHeight: 200,
flexibleSpace: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(height: 80),
Text(
"All notes",
style: AppStyle.largeTextStyle
.copyWith(fontWeight: FontWeight.w600),
),
const SizedBox(height: 10),
Text(
"${notes.length} notes",
style: AppStyle.smallTextStyle
.copyWith(fontWeight: FontWeight.w400),
),
],
),
),
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 16),
child: GridView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
primary: false,
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
mainAxisExtent: 170,
crossAxisCount: 2,
),
itemCount: notes.length,
itemBuilder: (context, index) {
final note = notes[index];
return GestureDetector(
onTap: () =>
Get.to(() => DetailsScreen(id: note.id)),
child: BaseContainer(note: note));
},
)),
),
],
),
floatingActionButton: SizedBox(
height: 65,
width: 65,
child: FloatingActionButton(
tooltip: 'Add note',
child: const Icon(
Icons.add,
size: 30,
),
onPressed: () => Get.to(() => const AddScreen()),
),
),
);
So how can I reverse SliverAppBar() when it's scrolling just like a first video ?
and second question is how can I remove that All notes text when it's scrolling and replace it with Large one just like first Video ..
if it possible to create that appBar like the first video (Samsung notes appBar) except SliverAppBar() please let me know .
Please refer to the below code
class _AnimatedAppBarState extends State<AnimatedAppBar>
with TickerProviderStateMixin {
final TextEditingController stateController = TextEditingController();
final FocusNode stateFocus = FocusNode();
var animation;
var controller;
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: NestedScrollView(
headerSliverBuilder:
(BuildContext context, bool innnerBoxIsScrolled) {
if (innnerBoxIsScrolled) {
/* Animation */
controller = AnimationController(
vsync: this,
duration: Duration(
seconds: 1,
),
);
animation = Tween(
begin: 0.0,
end: 1.0,
).animate(controller);
/* Animation */
controller.forward();
}
return <Widget>[
SliverAppBar(
expandedHeight: 120.0,
floating: false,
pinned: true,
backgroundColor: Colors.blueGrey,
automaticallyImplyLeading: false,
titleSpacing: 0.0,
toolbarHeight:
(innnerBoxIsScrolled != null && innnerBoxIsScrolled == true)
? 60.0
: 160.0,
centerTitle: false,
elevation: 0.0,
leadingWidth: 0.0,
title: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
if (innnerBoxIsScrolled != null &&
innnerBoxIsScrolled == true)
FadeTransition(
opacity: animation,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 5.0,
),
Row(
children: [
SizedBox(
width: 5.0,
),
Icon(
Icons.menu,
color: Colors.black,
),
SizedBox(
width: 10.0,
),
Text(
"All Notes",
style: TextStyle(
color: Colors.black,
),
),
Spacer(),
Icon(
Icons.search,
color: Colors.black,
),
SizedBox(
width: 10.0,
),
Icon(
Icons.more_vert,
color: Colors.black,
),
],
),
],
),
),
],
),
flexibleSpace: FlexibleSpaceBar(
background: Container(
width: MediaQuery.of(context).size.width,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
height: 30.0,
),
Text(
"All Notes",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 24.0,
),
),
Text(
"2 Notes",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 24.0,
),
),
Spacer(),
Row(
children: [
SizedBox(
width: 5.0,
),
Icon(
Icons.menu,
color: Colors.black,
),
Spacer(),
Icon(
Icons.search,
color: Colors.black,
),
SizedBox(
width: 10.0,
),
Icon(
Icons.more_vert,
color: Colors.black,
),
],
),
SizedBox(
height: 10.0,
)
],
),
),
),
),
];
},
body: Builder(
builder: (BuildContext context) {
return SingleChildScrollView(
child: Column(
children: [
ListView.builder(
itemCount: 100,
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(4.0),
child: Text("Index value: $index"),
);
},
)
],
),
);
},
),
),
),
);
}
}
import "package:flutter/material.dart";
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: "SliverAppBar",
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.red,
),
home: Home(),
);
}
}
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
bool x=true;
bool y=true;
bool z=true;
void xxx(){
setState(() {
x=!x;
});
}
void yyy(){
setState(() {
y=!y;
});
}
void zzz(){
setState(() {
z=!z;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
centerTitle: z,
pinned: x,
floating: y,
expandedHeight: 150.0,
flexibleSpace: FlexibleSpaceBar(
title: Text("CodeCave"),
),
actions: <Widget>[
IconButton(icon: Icon(Icons.fiber_pin),tooltip: "Pinned",onPressed: xxx,),
IconButton(icon: Icon(Icons.flare),tooltip: "Floating",onPressed: yyy,),
IconButton(icon: Icon(Icons.center_focus_strong),tooltip: "Center Text",onPressed: zzz,),
],
),
SliverFillRemaining(
child: Center(
child: Text("DEMO"),
),
),
],
),
);
}
}
I have a tabBar and TabBarView in body of the Scaffold widget, which is wrapped with SingleChildScrollView.
I want to display Column widget in the TabBarView (in this case it is the fourth tab), but it returns the error with OverFlow since SingleChildScrollView only detects the first element of the Column.
Any way to display Column widget here?
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
automaticallyImplyLeading: false,
leadingWidth: 80,
actions: const [
SizedBox(
width: 117.0,
)
],
leading: CustomBackButton(
onTap: () => Navigator.of(context).pop(),
),
backgroundColor: Theme.of(context).colorScheme.monochrome[300],
brightness: Brightness.light,
centerTitle: true,
title: Text(
'hello',
style: Theme.of(context).textTheme.subtitle1,
),
elevation: 0,
bottom: PreferredSize(
child: Container(
color: Theme.of(context).colorScheme.monochrome[400],
height: 1.0,
),
preferredSize: const Size.fromHeight(1.0),
),
),
body: SingleChildScrollView(
padding: const EdgeInsets.only(bottom: 64),
physics: const AlwaysScrollableScrollPhysics(),
child: Column(
children: [
DefaultTabController(
length: 4,
initialIndex: 0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
TabBar(
indicatorWeight: 4.0,
indicatorColor:
viewState.player!.team!.primaryColor(context),
tabs: [
Tab(
child: Text(
'tab1',)
Tab(
child: Text(
'tab2',
Tab(
child: Text(
'tab3',)
Tab(
child: Text(
'tab4',)
],
),
SingleChildScrollView(
physics: const AlwaysScrollableScrollPhysics(),
child: Container(
height: 472,
decoration: const BoxDecoration(
border: Border(
top: BorderSide(
color: Colors.grey,
width: 0.5,
),
),
),
child: TabBarView(
children: [
TabView1(),
TabView2()
TabView3()
Column(
children: [
_buildYearSelection()
ProfileTable(),]),
],
),
),
)
],
),
),
),
),
],
),
),
);
}
Just try with ListView instead of column
ListView(
shrinkWrap: true,
physics: ScrollPhysics(),
children: [
Text("data"),
SizedBox(height: 500,),
Text("data"),
SizedBox(height: 500,),
Text("data"),
SizedBox(height: 500,),
Text("data"),
SizedBox(height: 500,),
Text("data"),
],
),
Perhaps what you are trying to do is create a TabBar that hides itself when scrolled.
If that is the case then there is an easy way to achieve it using CustomScrollView.
Something like this:
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
elevation: 0.0,
title: Text("MY title"),
),
body: CustomScrollView(slivers: [
const SliverAppBar(
title: TabBar(
indicatorWeight: 4.0,
tabs: [
Tab(child: Text("Tab 1")),
Tab(child: Text("Tab 2")),
],
),
),
SliverFillRemaining(
child: TabBarView(children: [
Container(child: Text("Scr 1")),
Container(child: Text("Scr 2")),
]),
),
]),
),
);
Below is the complete code:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Home(),
);
}
}
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
elevation: 0.0,
title: Text("MY title"),
),
body: CustomScrollView(slivers: [
const SliverAppBar(
title: TabBar(
indicatorWeight: 4.0,
tabs: [
Tab(child: Text("Tab 1")),
Tab(child: Text("Tab 2")),
],
),
),
SliverFillRemaining(
child: TabBarView(children: [
Container(child: Text("Scr 1")),
Container(child: Text("Scr 2")),
]),
),
]),
),
);
}
}
How to add padding to text in SliverAppBar?
this code is not working:
SliverAppBar(
title: Padding(
padding: EdgeInsets.only(top: 100),
child: Text('text'),
)
)
If you set the padding more than the height of the SilverAppBar, the text won't be visible. A workaround is to add the title to the bottom of the SilverAppBar:
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxScrolled) {
return <Widget>[
SliverAppBar(
pinned: true,
bottom: PreferredSize(
preferredSize: Size.fromHeight(60.0),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Align(
alignment: Alignment.topLeft,
child: Text(
'Tabs demo',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 30),
)),
),
),
)
];
},
body: ...
)
);
}
Result:
Use the SliverAppBar like this with padding works like a charm:
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: 'NiklasLehnfeld',
home: Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
title: Padding(
padding: const EdgeInsets.only(top: 30.0),
child: Text("Niklas Lehnfeld"),
),
leading: Icon(Icons.menu),
)
],
),
)));
}
If it still doesn't work please provide more code how do you integrate the 'SliverAppBar` on your side.
For only Appbar
AppBar{
toolbarHeight: 180,
}
You can do like this:
SliverAppBar(
expandedHeight: 300, //add expand height
floating: false,
pinned: true,
bottom: PreferredSize( // Add this code
preferredSize: Size.fromHeight(60.0), // Add this code
child: Text(''), // Add this code
), // Add this code
flexibleSpace: Container(
padding: EdgeInsets.all(10),
height: 340,
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
height: 40,
),
Container(
height: 60,
),
Expanded(child: Container()),
Text('TEST'),
],
),
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('https://picsum.photos/400/400'),
fit: BoxFit.cover)),
),
)
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 0,
title: Text(
'Chats',
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.black, fontSize: 25),
),
leading: CircleAvatar(
maxRadius: 6.0,
backgroundImage: AssetImage('images/neon.jpg'),
),
),
); // Scaffold
class FacebookAppbar extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
title: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Image.asset(
'assets/images/facebook_icon.png',
fit: BoxFit.cover,
height: 35.0,
),
],
),
actions: <Widget>[
IconButton(
padding: EdgeInsets.all(5.0),
icon: Image.asset('assets/images/facebook_search.png'),
onPressed: () {
// Implement navigation to shopping cart page here...
print('Click Search');
},
),
IconButton(
padding: EdgeInsets.all(5.0),
icon: Image.asset('assets/images/facebook_msg.png'),
onPressed: () {
// Implement navigation to shopping cart page here...
print('Click Message');
},
),
],
),
body: Container(
decoration: BoxDecoration(color: Colors.grey),
)));
}
}
Hello I new to Flutter and I am having an issue on centering the components of my icons anyone can suggest the correct way to center the dashboard icons.I am still trying to fix it but if you could provide some pointers for me that would be great. I have tried putting it row to row but the issue still same also padding on the Widget that I created
Widget build(BuildContext context){
final _width = MediaQuery.of(context).size.width;
final _height = MediaQuery.of(context).size.height;
return new Stack(children: <Widget>[
new Container(color: Colors.blue,),
new Scaffold(
appBar: AppBar(
title: Text("Welcome"),
centerTitle: true,
),
drawer: MenuComponent(),
backgroundColor: Colors.transparent,
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Align(
alignment: FractionalOffset.topCenter,
child: Padding(
padding: EdgeInsets.all(10.0),
child: SizedBox(
height: 50,
width: 130,
child:new Text('One', style: new TextStyle(fontWeight: FontWeight.bold, fontSize: _width/15, color: Colors.white),),
),
),
)
),
new Divider(height: _height/30,color: Colors.white,),
],
),
Expanded(
child: Center(
child: GridView.count(
padding: const EdgeInsets.all(20.0),
crossAxisSpacing: 10.0,
mainAxisSpacing: 10.0,
crossAxisCount: 4,
children: <Widget>[
homePageRowCell(Icons.account_circle, "My Account",context,HomePage()),
homePageRowCell(Icons.dashboard, "Home page",context, HomePage()),
homePageRowCell(Icons.person_outline, "Profile",context, ProfilePage()),
homePageRowCell(Icons.settings, "Settings",context, Settings()),
homePageRowCell(Icons.exit_to_app, "Logout",context, LoginPage()),
],
),
)
)
],
),
),
)
],);
// return Scaffold(
// appBar: AppBar(
// title: Text("Home Page"),
// centerTitle: true,
// ),
// drawer: MenuComponent(),
// );
}
}
Widget homePageRowCell(var sIcon, String title, BuildContext context, var page) => new Container(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => page)
);
},
child: new Row(
children: <Widget>[
Column(
children: <Widget>[
new Icon(sIcon,color: Colors.white,),
new Text(title,style: new TextStyle(color: Colors.white, fontWeight: FontWeight.normal)),
],
),
],
),
)
);
Please try below code and check output
#override
Widget build(BuildContext context) {
final _width = MediaQuery.of(context).size.width;
final _height = MediaQuery.of(context).size.height;
return new Stack(
children: <Widget>[
new Container(
color: Colors.blue,
),
new Scaffold(
appBar: AppBar(
title: Text("Welcome"),
centerTitle: true,
),
drawer: MenuComponent(),
backgroundColor: Colors.transparent,
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Align(
alignment: FractionalOffset.topCenter,
child: Padding(
padding: EdgeInsets.all(10.0),
child: SizedBox(
height: 50,
width: 130,
child: new Text(
'One',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: _width / 15,
color: Colors.white),
),
),
),
)),
new Divider(
height: _height / 30,
color: Colors.white,
),
],
),
Expanded(
child: Center(
child: GridView.count(
crossAxisCount: 4,
crossAxisSpacing: 10.0,
mainAxisSpacing: 10.0,
children: <Widget>[
homePageRowCell(Icons.account_circle, "My Account",
context, HomePage()),
homePageRowCell(
Icons.dashboard, "Home page", context, HomePage()),
homePageRowCell(Icons.person_outline, "Profile", context,
ProfilePage()),
homePageRowCell(
Icons.settings, "Settings", context, Settings()),
homePageRowCell(
Icons.exit_to_app, "Logout", context, LoginPage()),
],
),
))
],
),
),
)
],
);
// return Scaffold(
// appBar: AppBar(
// title: Text("Home Page"),
// centerTitle: true,
// ),
// drawer: MenuComponent(),
// );
}
Widget homePageRowCell(
var sIcon, String title, BuildContext context, var page) =>
new Container(
child: GestureDetector(
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => page));
},
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Column(
children: <Widget>[
new Icon(
sIcon,
color: Colors.white,
),
new Text(title,
style: new TextStyle(
color: Colors.white, fontWeight: FontWeight.normal)),
],
),
],
),
));