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 !
Related
I need a global area on top to show some ads. This are remains the same for all pages and widgets. So far I've got this:
Stack(
children: [
Column(
children: <Widget>[
Container(
color: Theme.of(context).primaryColor,
width: double.infinity,
height: bannerHeight,
child: MY_BANNER,
),
Expanded(child: child!), // this has to be dynamic
],
),
],
);
What's the problem? It creates an extra padding for the AppBar that I don't know how to remove:
Instead of creating a space on top of AppBar you can put your banner ads below it. For this you can make a custom MyAppBar widget and use this custom widget inside the Scaffold.
class MyAppBar extends StatelessWidget with PreferredSizeWidget {
final String title;
MyAppBar(this.title) : preferredSize = const Size.fromHeight(110);
#override
final Size preferredSize;
#override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.max,
children: [
AppBar(
title: Text(
title,
),
),
Center(
child: Container( // Place your ad here
color: Colors.red,
width: MediaQuery.of(context).size.width / 2,
height: 50,
),
),
],
);
}
}
and use it like
Scaffold(
appBar: MyAppBar(
"Hello App",
),
),
return Scaffold(
body: SafeArea(
child: Column(
children: [
Row(
children: [
Expanded(
child: MY_BANNER
),
],
),
Expanded(child: child!),
],
),
),
);
I like to increase the height of the widget "B" so the orange color use the same space like the green color. I have added a code example.
If a added Extended() like Expanded(Container(Text('B'))) the full horizontal space of the screen is used.
If a added Extended() like Column(Expanded(Container(Text('B')))) the full vertical space of the screen is used.
Does someone has a hint?
Thank you in advance!
Gretings
Michael
Problem:
Goal:
Code:
import 'package:flutter/material.dart';
void main() {
runApp(DemoX());
}
class DemoX extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
color: Colors.red,
child: Container(
color: Colors.green,
child: Text('A1\nA2'),
),
),
Container(
color: Colors.orange,
child: Text('B'),
),
],
),
),
),
);
}
}
Screenshot
Code:
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: IntrinsicHeight(
child: Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
color: Colors.green,
child: Text('A1\nA2'),
),
Container(
color: Colors.orange,
child: Text('B'),
),
],
),
),
),
);
}
I'd like to center an image in appbar (As Twitter does in their mobilapps), but I can't find any logic that does that. I tried to wrap the Container with Center() but it didn't work.
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
title: Text('Cranes'),
actions: <Widget>[
Container(
// margin: const EdgeInsets.only(right: 75),
child: Image.asset(
'assets/hmf_logo_medium.png',
),
),
FlatButton(
onPressed: () async {
await Provider.of<FlutterSecureStorage>(context, listen: false)
.deleteAll();
Navigator.of(context).pushAndRemoveUntil(
MaterialPageRoute(builder: (context) => LoginPage()),
(route) => false);
},
child: Text(S.of(context).craneListPageLogoutText,
style: TextStyle(color: Colors.white)),
)
],
),
); }
Try this
AppBar(
leading: Center(
child: Text('Cranes'),
),
title: Image.asset('assets/hmf_logo_medium.png'),
centerTitle: true,
)
You can wrap your all items with row then mainAxisAlignment.spaceBetween can handle that.
AppBar(
title:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('Cranes'),
Container(
// margin: const EdgeInsets.only(right: 75),
child: Image.asset(
'assets/hmf_logo_medium.png',
),
),
FlatButton(
onPressed: () async {},
child: Text(S.of(context).craneListPageLogoutText,
style: TextStyle(color: Colors.white)),
)
],
),
),
Following would work :
AppBar(
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Cranes'),
Image.asset(
'assets/logo.png',
fit: BoxFit.contain,
height: 32,
),
Container()
],
),
)
Result :
in title Property Use your Image. and then make centerTitle:true,
AppBar(
backgroundColor: kWhite,
elevation: 0,
title: Image.asset(kLogoYellow),
centerTitle: true,
)
I want the blue to be full.
But it only spreads up to half.
https://i.stack.imgur.com/UQsiB.png
class TestScene extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Flexible(
fit: FlexFit.loose,
child: Container(
color: Colors.red,
child: const Text('1'),
),
),
Flexible(
fit: FlexFit.loose,
child: Container(
color: Colors.blue,
child: const Text('1234567890123456789012345678901234567890'),
),
),
],
),
);
}
}
The reverse will also fail.
https://i.stack.imgur.com/rf00I.png
In both cases, it's nice.
https://i.stack.imgur.com/21ORb.png
This is a way ! (To take remain space)
String one='1',two='1234567890123456789012345678901234567890';
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
backgroundColor:Colors.white,
body: Row(
mainAxisSize:MainAxisSize.max,
children: <Widget>[
one.length>=two.length ?
Expanded(
child: Container(
color: Colors.red,
child: Text(one),
),
):Container(
color: Colors.red,
child: Text(one),
),
two.length>=one.length ?
Expanded(
child: Container(
color: Colors.blue,
child: Text(two),
),
):Container(
color: Colors.blue,
child: Text(two),
),
],
),
);
}
Or to maintain equal size with colors simply use Expanded in both widgets
Wrap the one that you want to fill the space by Expanded. If you want both red and blue to fill the row, wrap both of them with Expanded and give them their own ratio with the flex property
class TestScene extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Row(
children: <Widget>[
Container(
color: Colors.red,
child: const Text('1'),
),
Expanded(
child: Container(
color: Colors.blue,
child: const Text('1234567890123456789012345678901234567890'),
),
),
],
),
);
}
}
I am making a custom AppBar that has a larger height than the typical AppBar. I would like to resize the leading widget/icon as well, and take advantage of the automaticallyImplyLeading default behaviors (so the menu icons and back icons are automatically implemented).
This is the solution I thought I would implement:
class AppAppBar extends PreferredSize{
AppAppBar(String title) : super(
preferredSize: Size.fromHeight(56.0),
child: AppBar(
centerTitle: true,
title: Text(title, style: textStyle)
)) {
(child as AppBar).leading =
SizedBox(width: 30.0, height: 30.0, child: (child as AppBar).leading);
}
static const textStyle = TextStyle(fontSize: 32.0);
}
But of course this won't work because (child as AppBar).leading is final.
So in the AppBar below (text size made dramatically larger for illustration purposes), I would like to make the automatically added hamburger icon larger in comparison.
What do you think? Are there solutions for this or should I give up on the automatic icons and add them myself?
Edit: Added an image to show what I mean
You cant because it is a predefined widget.
You can work around it with a Row widget:
Scaffold(
key:_scaffoldKey,
drawer: Drawer(),
appBar: AppBar(
automaticallyImplyLeading: false
title: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 20, // Your Height
width: 20, // Your width
child: IconButton( // Your drawer Icon
onPressed: () => _scaffoldKey.currentState.openDrawer()),
icon: Icon(Icons.arrow_back, color: Colors.white),
),)
// Your widgets here
],
),
),
)
You need the Key to open the drawer with _scaffoldKey.currentState.openDrawer().
automaticallyImplyLeading: false will prevent the default drawer Icon.
A simple example to demonstrate Raffi Jonas answer
AppBar(
automaticallyImplyLeading: false,
title: Row(
children: [
Expanded(
child: Text('One'),
),
Center(
child: Text('Two'),
),
Expanded(
child: Align(
alignment: Alignment.centerRight,
child: Text('Three'),
),
),
],
),
),
The leading Widget width of AppBar in Flutter can be resized using the leadingWidth property.
For Example :
AppBar(
title: const Text('Title'),
leadingWidth: 50,
leading: Container()
)
What you want is a custom app bar in Flutter. Most people try giving their own widgets in the title argument of an AppBar. But let me show you how to properly do it.
#override
Widget build(BuildContext context) => Scaffold(
appBar: _appBar(),
body: _body(),
);
//Custom AppBar
_appBar() => PreferredSize(
//kToolBarHeight: Default size used by all AppBar widgets in Flutter.
//MediaQuery...: viewPadding.top is StatusBar area. viewPadding.bottom is iPhone bottom bar.
preferredSize: PreferredSize.fromHeight(kToolBarHeight + MediaQuery.of(context).viewPadding.top),
child: Container(
child: Row(
//This will spread Row content evenly across the screen.
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
//Leading Widget
Icon(Icons.home),
//Title
Text("Hello World!"),
//Trailing Widget / Actions
Icon(Icons.home),
],
),
),
);
Widget _body() => Container(
color: Colors.blue,
);
You can set a margin for height or width.
AppBar(
leading: Container(
margin: EdgeInsets.symmetric(vertical: 15),
child: IconButton(
icon: Icon(CupertinoIcons.chevron_left),
onPressed: () {},
),
),
To use a custom appBar leading button, here is the code.
appBar: AppBar(
title: Text('hello'),
// automaticallyImplyLeading: false,
elevation: 0,
leadingWidth: 58,
actions: [
ProfileBar(),
],
leading: Container(
width: 14,
//color: Colors.yellow,
child: Row( // <--- Using row to avoid force resizing of leading
children: [
Padding( // <--- Padding to make it look more nicer
padding: const EdgeInsets.only(left: 24.0),
child: GestureDetector(
onTap: () {
Navigator.of(context).pop();
},
child: SvgPicture.asset( // <-- Using SvgPicture package
'assets/svg/icons/backbtn.svg',
width: 24,
height: 24,
),
),
),
],
),
),
),