Flutter change custom AppBar height - flutter

I tried this link and it didn't work.
In this code when I try to change height of AppBar, but it doesn't any change.
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.transparent,
body: Container(
height: double.infinity,
child: Column(
children: <Widget>[
PreferredSize(
preferredSize: Size.fromHeight(150.0),
child: AppBar(
backgroundColor: Colors.white.withOpacity(0.9),
title: Container(height: 150.0,),
),
)
],
)),
);
}
Note: My AppBar(...) isn't used in appBar:

Just use toolbarHeight:
appBar: AppBar(
toolbarHeight: 150, // This is your height!
title: Text('AppBar'),
)
However, if you don't want to use appBar property
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.transparent,
body: Container(
height: double.infinity,
child: Column(
children: <Widget>[
Container(
height: 150, // height of AppBar
child: AppBar(
backgroundColor: Colors.blue.withOpacity(0.9),
title: Text("AppBar"),
),
)
],
),
),
);
}

class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new Scaffold(
body: Stack(
children: <Widget>[
Container(
color: Colors.blue,
),
new Positioned(
top: 0.0,
left: 0.0,
right: 0.0,
child: AppBar(
title: Text('App Bar'),
backgroundColor: Colors.green,
),
),
],
)),
);
}
}

For more controls , Use the PreferedSize widget to create your own appBar
Example :
appBar: PreferredSize(
preferredSize: Size(100, 80), //width and height
// The size the AppBar would prefer if there were no other constraints.
child: SafeArea(
child: Container(
height: 100,
color: Colors.red,
child: Center(child: Text('Fluter is great')),
),
),
),
Don't forget to use a SafeArea widget if you don't have a safeArea
Output :

Related

How to display text over AppBar in flutter?

I want to display text message above app bar like this,
How can I achieve this with flutter?
Thanks in Advance!
Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(customSize),
child: Column(
children: [
Text('Connecting...'),
AppBar(
title: Text('Recents'),
)
],
)),
body: content...,
);
You can add as parent SafeArea to avoid intrusions by the operating system
You can also use padding for alignment.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
bool _showConnecting = false;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// 24 for default icon size
toolbarHeight: _showConnecting ? kToolbarHeight + 24 : kToolbarHeight,
centerTitle: false,
leadingWidth: 0,
titleSpacing: 0,
automaticallyImplyLeading: false,
title: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
if (_showConnecting)
Container(
color: Colors.black,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.network_cell_sharp),
Text("Connecting.."),
],
),
),
Container(
height: kToolbarHeight,
alignment: Alignment(-.8, 0),
color: Theme.of(context).primaryColor,
child: Text("Recent Mentions"),
),
],
),
),
body: SingleChildScrollView(
child: Column(
children: [
...List.generate(
44,
(index) => Container(
height: 100,
color: index.isEven ? Colors.amber : Colors.cyanAccent,
),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_showConnecting = !_showConnecting;
});
},
),
);
}}
Scaffold -> Body -> Column -> [ ...widgets, AppBar() ]
If you want to achieve the same design, Consider using this to achieve a consistency of colors between the appBar and statusBar:
import 'package:flutter/services.dart';
void main() {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.black, // status bar color
));
}
On the other hand, appBar title property is a widget, you can modify it as you wish !

How can I add a drawer in the app bar in flutter?

I am trying to add a drawer in my appbar but i couldnt manage to fix it.
My code looks like this, please help!
Widget appBarMain(BuildContext context) {
return AppBar(
centerTitle: false,
title: Image.asset(
'assets/images/logox.png',
height: 45,
),
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: <Color>[Colors.pink[400], Colors.blue[400]]),
),
),
);
}
add a drawer with Scaffold:
return Scaffold(
appBar: appBarMain(context),
body: Center(child: Text('My Page!')),
drawer: Drawer(
// Add a ListView to the drawer. This ensures the user can scroll
// through the options in the drawer if there isn't enough vertical
// space to fit everything.
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Text('Drawer Header'),
decoration: BoxDecoration(
color: Colors.blue,
),
),
ListTile(
title: Text('Item 1'),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
),
],
),
),
);
Read https://flutter.dev/docs/cookbook/design/drawer
Do like this
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: appBarMain(context), // => appbar is an attribute in Scaffold
body: Center(
child: MyWidget(),
),
),
);
}
}
A drawer is added to Scaffold and not the AppBar. It is only its icon that is automatically shown in the AppBar.
See: https://flutter.dev/docs/cookbook/design/drawer

How to add a TabBar in AppBar in Flutter?

I have a AppBar as defined below. I want to add a TabBar below it. When i try to supply it in the bottom: property of the AppBar it throws a renderflex error:
This is my code:
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
body: Stack(
children: [
Positioned(
top: 15,
left: 15,
right: 15,
child: SafeArea(
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: AppBar(
title: Text('Hello', style: kTasksStyle),
centerTitle: true,
backgroundColor: kGreen,
),
),
),
),
],
)),
);
}
This is what the appBar looks like:
Probably you are trying to this
#override
Widget build(BuildContext context) {
final List<Tab> myTabs = <Tab>[
Tab(text: 'LEFT'),
Tab(text: 'RIGHT'),
];
return DefaultTabController(
length: 2,
child: SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text("Hello"),
centerTitle: true,
bottom: TabBar(
tabs: myTabs,
),
),
body: TabBarView(
children: myTabs.map((Tab tab) {
final String label = tab.text.toLowerCase();
return Center(
child: Text(
'This is the $label tab',
style: const TextStyle(fontSize: 36),
),
);
}).toList(),
),
),
),
);

Change AppBar title padding

Due to unavailability of modifying app bar leading property width I'm forced to create my own leading trailing property by using AppBar title property. However I've noticed that title has some default horizontal padding there.
Scaffold(
appBar: AppBar(
centerTitle: true,
title: Container(
height: 36,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(width: 80, child: Text('Cancel')),
Text('Profile'),
Container(width: 80, child: Text('Done'))
],
),
),
),
)
Is there any way to make it smaller?
Use action[] inside the appbar instead of using Row.
appBar: new AppBar(
//title: new Text(Strings.app_name),
actions: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: new RaisedButton(onPressed: (){
},
child: new Text('Cancel'),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child:
new RaisedButton(onPressed: (){
},child: new Text('done'),)
),
],
//centerTitle:true,
),
You can use the titleSpacing property of the AppBar to control the horizontal spacing for the title.
For example following snippet will remove all the leading spacing from title-
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: MyStatelessWidget(),
);
}
}
/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
MyStatelessWidget({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
titleSpacing: 0.0,
title: const Text('AppBar Demo'),
),
body: const Center(
child: Text(
'This is the home page',
style: TextStyle(fontSize: 24),
),
),
);
}
}
I hope this helps!
Please use titleSpacing: 0.0
appBar: AppBar(
titleSpacing: 0.0,
title: Text('AppBar Example'),
),

My AppBar is behind my Image on the screen or I can not see it, any suggestion to display my AppBar and buttomNavigator on top and translucent?

My AppBar is behind my Image on the screen or I can not see it, any suggestion to display my AppBar and buttomNavigator on top and translucent?
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
DisplayScreeImages(),
Positioned(
top: 0.0,
left: 0.0,
right: 0.0,
child: AppBar(
title: Text('I am happy'),
),
),
],
),
);
}
Your Scaffold should take the app bar.
Try the following:
return Scaffold(
appBar: AppBar(
title: Text('I am happy'
),
),
body: Stack(
children: <Widget>[
DisplayScreeImages(),
],
),
),