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'),
),
Related
This problem only happens inside Drawer
I wanted to shape the ripple effect of my ExpansionTile so I used the Material widget and it works, but when the tile expands, the background color of the tiles below ExpansionTile does not move with them.
When ExpansionTile is collapsed
When ExpansionTile is expanded
I found out that when I remove SingleChildScrollView the problem solves but I need items to scroll. Also when ScrollPhysics has been set to AlwaysScroll, scrolling till the end of the scroll's possible position would rerender items and fix the issue.
Reproducible Example:
void main() {
runApp(
MaterialApp(
title: 'Title',
home: Scaffold(
appBar: AppBar(
title: const Text('Title'),
),
drawer: const MyList(),
body: Container(),
),
),
);
}
class MyList extends StatelessWidget {
const MyList({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Drawer(
child: SingleChildScrollView(
physics: const AlwaysScrollableScrollPhysics(),
child: Column(
children: [
items(),
],
),
),
);
}
Widget items() {
return Wrap(
runSpacing: 12,
children: [
menu(),
const ListTile(title: Text('title'), tileColor: Colors.grey),
const ListTile(title: Text('title')),
]
);
}
Widget menu() {
return Material(
clipBehavior: Clip.antiAlias,
type: MaterialType.transparency,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)
),
child: const ExpansionTile(
leading: Icon(Icons.group),
title: Text('title'),
children: [
ListTile(title: Text('title')),
ListTile(title: Text('title')),
],
),
);
}
}
If you want to avoid SingleChildScrollView and still be able to scroll over a list, you can use ListView.builder link: - ListView.builder flutter.dev
Try removing type: MaterialType.transparency,
class MyList extends StatelessWidget {
const MyList({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Drawer(
child: SingleChildScrollView(
child: Column(
children: [
for (int i = 0; i < 2; i++) items(),
],
),
),
);
}
Widget items() {
return Wrap(
children: [
menu(),
const ListTile(
title: Text('title'),
tileColor: Colors.grey,
),
const ListTile(title: Text('title')),
],
);
}
Widget menu() {
return Material(
clipBehavior: Clip.antiAlias,
// type: MaterialType.transparency,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
child: const ExpansionTile(
leading: Icon(Icons.group),
title: Text('title'),
children: [
ListTile(title: Text('title')),
ListTile(title: Text('title')),
],
),
);
}
}
I asked for this problem on flutter's Github repo and I got the answer.
Just need to use ListTileTheme widget instead of Material widget.
Github issue link:
https://github.com/flutter/flutter/issues/112372
I am finding it difficult to add a drawer in the latest version of flutter. My code looks like this
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: buildAppbar(),
body: const Body(),
drawer: DrawerSlide(),
);
}
AppBar buildAppbar() {
return AppBar(
elevation: 3,
leading: GestureDetector(
child: Padding(
padding: const EdgeInsets.all(12.0),
child: SvgPicture.asset('assets/icons/menu.svg', width: 10, height: 10, fit: BoxFit.fitWidth,),
),
onTap: () => Scaffold.of(context).openDrawer(),
),
);
}
}
There is an error shown in Scaffold.of(context).openDrawe() that the context is not defined. It was working till I updated my flutter but in new flutter I think it is not working.
The buildAppbar method requires context as a positional argument :
AppBar buildAppbar(BuildContext context) {
return AppBar(
elevation: 3,
leading: GestureDetector(
child: Padding(
padding: const EdgeInsets.all(12.0),
child: SvgPicture.asset('assets/icons/menu.svg', width: 10, height: 10, fit: BoxFit.fitWidth,),
),
onTap: () => Scaffold.of(context).openDrawer(),
),
);
}
use it like :
return Scaffold(
appBar: buildAppbar(context),
body: const Body(),
drawer: DrawerSlide(),
);
Is it possible to set the width of a drawer in Flutter to the width of its widetst child to avoid f. e. clipping of the DrawerHeader?
That is what it should look like:
green is the screen, grey the drawer
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(),
drawer: Container(
color: Colors.grey,
padding: EdgeInsets.symmetric(horizontal: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SafeArea(
child: Container(
padding: EdgeInsets.symmetric(vertical: 24),
child: Text('User name'),
),
),
Text('Text'),
Text(
'Long loong looooooong very very very long text',
maxLines: 1,
),
],
),
),
),
);
}
}
I can't seem to get icon button to appear with text next to it. Should look like:
I am following the introduction tutorial in Udacity. Still trying to get my head around all of the correct formatting, widgets, etc
Code:
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
title: "Category List",
home: Scaffold(
appBar: AppBar(
title: Text('This is a list item'),
),
body: Category(),
),
),
);
}
class Category extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Material(
child: Container(
child: Padding(
padding: EdgeInsets.all(16.0),
child: InkWell(
onTap: () => {},
child: Row(
children: <Widget>[
Icon(Icons.access_alarms),
Text('Click'),
],
),
),
),
),
);
}
}
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
title: "Category List",
home: Scaffold(
appBar: AppBar(
title: Text('This is a list item'),
),
body: Category(),
),
),
);
}
class Category extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Material(
child: Container(
decoration:BoxDecoration(
color:Colors.green.withOpacity(0.4),
border:Border.all(),
),
child: Padding(
padding: EdgeInsets.all(16.0),
child: InkWell(
onTap: () => {},
child: Row(
children: <Widget>[
Icon(Icons.access_alarms),
Text('Click'),
],
),
),
),
),
);
}
}
have you tried to wrap your icons and text using Expanded() widget?
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 :