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,
)
Related
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 1,
backgroundColor: appBarColor,
centerTitle: true,
title: const Text('News'),
),
body: Column(
children: [
news.length < 2
? ImageSlideshow(
children: [NewsSlideWidget0(news: news)],
)
: ImageSlideshow(
children: [
NewsSlideWidget0(news: news),
NewsSlideWidget1(news: news)
],
),
Container(
color: Colors.white,
child: ListTile(
// selectedTileColor: Colors.white,
title: Text(news_screen_title, style: news_screen_title_tstyle),
subtitle: Text(news_screen_subtitle),
),
),
news.isEmpty
? const CircularProgressIndicator()
: Expanded(
child: LazyLoadScrollView(
onEndOfPage: () => loadNextPage(),
scrollOffset: 10,
child: ListView.builder(
itemCount: news.length,
itemBuilder: (BuildContext context, int i) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => NewsInnerScreen(
title: news[i].title,
date: news[i].date,
image: news[i].images[0],
content: parse(news[i].content).body!.text,
),
),
);
},
child: Container(
child: ListTile(
contentPadding: EdgeInsets.all(15),
title: Text(
news[i].title,
),
subtitle: Column(
children: [
Text(
parse(news[i].content).body!.text,
style:
),
Text(
news[i].date,
),
],
),
trailing: ConstrainedBox(
constraints: const BoxConstraints(
minWidth: 100,
minHeight: 300,
maxWidth: 104,
maxHeight: 300,
),
child: ClipRRect(
child: Image(
image: NetworkImage(
news[i].images[0],
),
),
),
),
),
),
),
);
},
),
),
),
],
),
);
}
my screen is like this I want this column to scrollable I tried singlechildscrollview and listview those did not work for me and I use a plugin for pagination and I use more widgets also and I extracted that and u I use image slide show packages for carousel so how can I do that I am new to flutter please let me know
All list builder in Flutter have property called "shrinkWrap"
Just turn it to "true"
There is an application page that is responsible for displaying devices. There is a code that returns AppBar, Body, Drawer.
Question: how do I put the description "List of devices" between AppBar and Body (as in the photo)
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: true,
backgroundColor: Colors.black,
title: const Text('IT', style: TextStyle(fontSize: 45,
fontWeight: FontWeight.w800,
color: Colors.white)),
centerTitle: true,
actions: [
IconButton(
icon: const Icon(Icons.filter_alt,
size: 30.0,),
color: Colors.white,
onPressed: () {
showDialog<Filter>(context: context, builder: (_) {
return FilterDialog(onApplyFilters: _filter,);
});
},
),
],
),
body: PhonesList(phones: filteredPhones),
drawer: Drawer(.....),
);
you use appbar bottom ... and customization
bottom: PreferredSize(
child: Container(
color: Colors.white,
child: row(
),
),
preferredSize: Size.fromHeight(kToolbarHeight)
),
Use bottom property of AppBar and add text inside it
Text will be shown at the bottom of AppBar
use a column widget below appbar or introduce a column widget on Body.
Column(
children:<Widget>[
Container(
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(10),
color:Colors.green
),
child: Column(
children:<Widget>[
Text("iphone 11 ",style: TextStyle(color:Colors.white,fontSize:25),),
Text("ios 15")
])
),
Container(
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(10),
color:Colors.green
),
child: Column(
children:<Widget>[
Text("iphone 13 ",style: TextStyle(color:Colors.white,fontSize:25),),
Text("ios 13")
])
),
]
),
I am trying to dynamically add photos to carousel_slider plugin, but I cannot simply add items to the list. Does anyone know how to add it?
My example below, shows that I am using a FloatActionButton to add an image into the imgList variable. But the carousel does not get this new added value.
I already tried to call setState() on the imgList variable. But no success.
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end,
children:
[ FloatingActionButton(
onPressed: () {
print('save');
imgList.add( 'https://images.unsplash.com/photo-1508704019882-f9cf40e475b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8c6e5e3aba713b17aa1fe71ab4f0ae5b&auto=format&fit=crop&w=1352&q=80');
},
child: Icon(Icons.photo_camera),
heroTag: null,
),
SizedBox(
height: 10,
),
FloatingActionButton(
onPressed: () => print('save'),
child: Icon(Icons.check_circle),
heroTag: null,
),
],
),
appBar: AppBar(
title: Text('Test carousel'),
centerTitle: true,
elevation: 0.0,
toolbarOpacity: 0.5,
),
body: Container(
child: CarouselSlider(
options: CarouselOptions(
disableCenter: true,
),
items: imgList.map((item) => Container(
child: Image.network(item, fit: BoxFit.cover, width: 1000),
color: Colors.green,
)).toList(),
))
);
I already try setState add image. It success.
You can try again.
My code:
List<String> _image = [
"https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png",
"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRnltfxyRHuEEUE4gIZp9fr77Q8goigP7mQ6Q&usqp=CAU",
"https://imageproxy.themaven.net//https%3A%2F%2Fwww.history.com%2F.image%2FMTY1MTc3MjE0MzExMDgxNTQ1%2Ftopic-golden-gate-bridge-gettyimages-177770941.jpg",
"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ-fff2lftqIE077pFAKU1Mhbcj8YFvBbMvpA&usqp=CAU",
"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRU2U6QAHfoDaofFbNo4OLtaqYWzihF5d4fhw&usqp=CAU"];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Modular"),
),
body: Center(
child: Column(
children: [
CarouselSlider(
options: CarouselOptions(
disableCenter: true
),
items: _image.map((e) => Container(
child: Image.network(e),
)).toList(),
),
FlatButton(
child: Text('abc'),
onPressed: (){
setState(() {
_image.add("https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg");
});
},
)
],
),
),
);
}
Hello i am trying to give title to the app bar for cupertinonavigationbar middle widget but the text is not showing up.I tried to change the middle title text color still not showing up.What am i missing here?
static buildAppBar(
{bool isIOS,
Function onPressedShoppingSearch,
String heroTag,
String middleTitle}) {
return (isIOS == true)
? CupertinoNavigationBar(
middle: (middleTitle != null)
? Text(
middleTitle,
style: TextStyle(color: Colors.grey, fontSize: 18),
)
: Text(''),
transitionBetweenRoutes: false,
automaticallyImplyMiddle: true,
automaticallyImplyLeading: true,
heroTag: heroTag,
backgroundColor: Colors.white,
trailing: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
GestureDetector(
child: Icon(
FrinoIcons.f_search_classic,
color: Colors.red,
size: 23,
),
onTap: onPressedShoppingSearch,
),
const SizedBox(width: 6),
const Icon(
FrinoIcons.f_cart,
color: Colors.red,
size: 23,
),
],
),
)
I've just had a similar problem and found that the middle widget wasn't being displayed because my trailing widget was deemed (somehow) to be too large for that section of the navigation bar.
There are a few people that seem to be having similar issues due to leading and trailing widgets requiring a smaller size: https://github.com/flutter/flutter/issues/36689
Here's the code that I used in order to get it working (both old & new).
ORIGINAL CODE (Which wasn't working):
#override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
leading: Container(),
middle: Text(
'Filters'.tr,
),
trailing: _closeButton(),
),
backgroundColor: Colors.white,
child: SafeArea(
child: Stack(
children: [_closeButton()],
),
),
);
}
Widget _closeButton() {
return Align(
alignment: Alignment.topRight,
child: Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
child: Container(
height: 32,
width: 32,
child: TextButton(
onPressed: () => _closeView(),
child: Image(
color: Colors.black,
image: AssetImage(SignalAsset.imagePath('icon_cross')),
)),
),
),
);
}
NEW CODE (Which works):
#override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
leading: Container(),
middle: Text(
'Filters'.tr,
),
trailing: GestureDetector(
child: Image(
color: Colors.black,
image: AssetImage(SignalAsset.imagePath('icon_cross')),
),
onTap: () => _closeView(),
),
),
backgroundColor: Colors.white,
child: SafeArea(
child: Stack(
children: [_closeButton()],
),
),
);
}
I faced some problem. I want make an image, a text and two icons in AppBar but I can't make it work as I want.
I tried to make some fonts in a row after the images and text. The images and the text successful show in my AppBar, but the rest of 2 fonts (Trolley and notifications) show some error.
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Colors.amber,
appBar: new AppBar
(
title: new Row
(
mainAxisAlignment: MainAxisAlignment.start,
children:
[
Image.asset('images/logoapp.png',fit: BoxFit.contain,height: 32,),
Container(padding: const EdgeInsets.all(8.0), child: Text('Solid Shop'))
],
)
),
....
Use leading to set a widget before appBar title & use actions to specify list of widgets in appBar which appears on right side of appBar title.
AppBar(
leading: Image.asset('yourImage'), // you can put Icon as well, it accepts any widget.
title: Text ("Your Title"),
actions: [
Icon(Icons.add),
Icon(Icons.add),
],
);
Read more about it here
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Solid Shop"),
leading: Image.asset("your_image_asset"),
actions: <Widget>[
IconButton(icon: Icon(Icons.shopping_cart), onPressed: () {}),
IconButton(icon: Icon(Icons.message), onPressed: () {}),
],
),
);
}
You need to use actions instead of title
actions: <Widget>[
Image.asset('images/logoapp.png',fit: BoxFit.contain,height: 32,),
Container(padding: const EdgeInsets.all(8.0), child: Text('Solid Shop')),
Image.asset('images/logoapp.png',fit: BoxFit.contain,height: 32,), // here add notification icon
Container(padding: const EdgeInsets.all(8.0), child: Text('Solid Shop')) // here add other icon
],
You can add icon and also a picture on app bar, this code works for me:-
appBar: AppBar(
centerTitle: true,
elevation: 2,
title: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
"assets/images/bell.png",
fit: BoxFit.contain,
height: 28,
),
Container(
child: Text(" APP BAR"),
)
],
),
),
actions: [
IconButton(
icon: Icon(Icons.settings),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return Settings();
},
),
);
},
color: Colors.white,
)
],
),
Hope this was helpful.
You can combine it with Spacers :
actions: const [
Spacer(flex: 3),
Icon(Icons.fit_screen),
Spacer(flex: 10),
Icon(Icons.width_normal),
Spacer(flex: 1),
Icon(Icons.aspect_ratio),
Spacer(flex: 1),
Icon(Icons.ad_units),
Spacer(flex: 5),
],