I want to place two icons, side by side on the "trailing" side of a ListTile. I tried adding a Row widget with the two icons inside, but it completely messed up the layout of the entire ListTile, making it unusable. Is there any way to expand the space allocated for the trailing part?
Here's the code:
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.play_arrow,),
title: Text("This is a title"),
subtitle: Text("This is subtitle"),
trailing: Row(
children: <Widget>[
Icon(Icons.flight),
Icon(Icons.flight_land)
]),
)
]
),
),
);
}
}
This is how it looks like:
Adding mainAxisSize: MainAxisSize.min to the Row() instance fixes the issue.
You can simply use Wrap in trailing
ListTile(
title: Text("This is my ListTile"),
trailing: Wrap(
spacing: 12, // space between two icons
children: <Widget>[
Icon(Icons.call), // icon-1
Icon(Icons.message), // icon-2
],
),
)
Try this code. I think this is working correctly:
trailing: FittedBox(
fit: BoxFit.fill,
child: Row(
children: <Widget>[
Icon(Icons.flight),
Icon(Icons.flight_land),
],
),
),
I took advantage of the FittedBox solution left above and solved my problem by displaying a TextButton and an IconButton when the screen is in landscape and when in portrait mode, only IconButton
trailing: MediaQuery.of(context).size.width > 480
? FittedBox(
fit: BoxFit.fill,
child: Row(
children: <Widget>[
TextButton(
style: TextButton.styleFrom(
// padding: const EdgeInsets.all(16.0),
primary: Theme.of(context).errorColor,
textStyle: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold),
),
onPressed: () => onRemove(tr.id),
child: const Text('Excluir'),
),
IconButton(
icon: Icon(Icons.delete),
color: Theme.of(context).errorColor,
onPressed: () => onRemove(tr.id),
),
],
),
)
: IconButton(
icon: Icon(Icons.delete),
color: Theme.of(context).errorColor,
onPressed: () => onRemove(tr.id),
),
Given negative value to spacing did the trick:
trailing: Wrap(
spacing: -16,
children: [
IconButton(
icon: const Icon(Icons.edit),
onPressed: () {},
),
IconButton(
icon: const Icon(
Icons.delete,
color: Colors.redAccent,
),
onPressed: () {},
),
],
),
Related
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
leading: const Icon(Icons.home),
automaticallyImplyLeading: true,
title: const Text('test app'),
foregroundColor: Colors.black,
actions: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.menu),
),
],
),
body: Container(
child: Column(
children: [
Row(
children: [
const Text(
'New',
style: TextStyle(
color: Colors.black54,
fontSize: 40,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
height: 2,
shadows: [
Shadow(color: Colors.black12, offset: Offset(4, 10))
]),
),
ElevatedButton.icon(onPressed: (){}, icon: Icon(Icons.navigate_next),label: Text(' '),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.grey),
),
),
],
),
Row(),
],
),
),
),
);
}
use the Row widget properties for laying out its childrens
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [....]
)
the official docs are helpful in that matter
https://api.flutter.dev/flutter/widgets/Row-class.html
sidenote: if you are not planning to use any of the first container() properties then its better to get rid of it
There are 4 options u can use depending on what you want
If u want it below new u can use Column instead of Row .
If u want to put some space next to new u can use SizedBox(width:X) between the Text and the elevated button.
You can use mainAxisAlignment or crossAxisAlignment inside the row or column to customize the position
you can find examples about them here https://docs.flutter.dev/development/ui/layout
you can use margin or padding on elevated button to customize its own position
I am using Default Sidebar but getting error while scroll
'The $controllerForError is currently attached to more than one '
'ScrollPosition.',
here is Sidebar Widget
#override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/bgimage.jpg"),
fit: BoxFit.cover),
color: Colors.blue,
),
child: Center(
child: Column(
children: [
Text(
'${store.user['name']}',
style: TextStyle(color: Colors.white, fontSize: 25),
),
Lottie.asset(
'assets/lottie/coin.json',
width: 50,
height: 50,
),
Text(
'${store.user['wallet']}',
style: TextStyle(color: Colors.white, fontSize: 20),
),
],
)),
),
ListTile(
leading: Icon(Icons.home),
title: Text('Home'),
onTap: () {
Navigator.popAndPushNamed(context, '/home');
},
),
ListTile(
leading: Icon(Icons.assessment_outlined),
title: Text('Loss/Profit'),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
leading: Icon(Icons.calendar_today),
title: Text('Results'),
onTap: () {
Navigator.popAndPushNamed(context, '/result');
},
),
ListTile(
leading: Icon(Icons.supervised_user_circle),
title: Text('Referrals'),
onTap: () {
Navigator.pop(context);
},
),
],
);
}
}
Using in homepage
drawer: Drawer(
child: Sidebar(),
),
where is scroll position is using multiple
by default drawer is already scrollable. i think the cause of not being able to scroll is not in the drawer
everyone
I'm encountering a problem while using Flutter.
Basically when i open my CustomDrawer widget, not always but quite frequently, the keyboard pops out in an unwanted way.
I don't get why it does it... maybe because it re-runs the build method or something i don't know. Down below you can find the code.
Every little bit of information is well appreciated.
Thanks everyone.
Here's the Screen.dart
...
build(context) {
return Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
iconTheme: IconThemeData(color: Colors.white),
backgroundColor: Colors.transparent,
elevation: 0,
),
drawer: CustomDrawer(),
...
And the custom_drawer_widget.dart
...
#override
Widget build(BuildContext context) {
return Drawer(
child: Column(
children: [
Stack(
children: [
Container(
padding: EdgeInsets.all(20),
child: Text(
"Hi, $username",
style: TextStyle(
fontSize: 22,
),
),
alignment: Alignment.bottomLeft,
color: Colors.yellow,
height: 300,
),
],
),
Container(
height: 60.0 * 6,
child: Column(
children: [
Container(
height: 60,
child: FlatButton(
padding: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
highlightColor: Colors.grey[350],
color: Colors.transparent,
onPressed: () {},
child: Row(
children: [
Icon(
Icons.home,
color: Colors.grey[600],
),
SizedBox(width: 30),
Text("Homepage"),
],
),
),
),
ListTile(
leading: Icon(Icons.book),
title: Text("Diary"),
onTap: () {}),
ListTile(
leading: Icon(Icons.chat),
title: Text("Chat"),
onTap: () {}),
ListTile(
leading: Icon(Icons.credit_card),
title: Text("Credit Card"),
onTap: () {}),
ListTile(
leading: Icon(Icons.exit_to_app),
title: Text("Sign Out"),
onTap: () async {
await FirebaseAuth.instance.signOut();
}),
ListTile(
leading: Icon(Icons.settings),
title: Text("Settings"),
onTap: () {}),
],
),
),
Expanded(
child: Container(
padding: EdgeInsets.all(22),
alignment: Alignment.bottomLeft,
child: Row(
children: [
Text("Version 0.1"),
],
),
),
)
],
),
);
}
...
I don't see exactly where you dismiss the keyboard, but I was having the same issue after dismissing the keyboard after a form submit. This fixed my issue.
See this answer here:
https://github.com/flutter/flutter/issues/54277
Where instead of:
onTap: () {
FocusScopeNode currentFocus = FocusScope.of(context);
if (!currentFocus.hasPrimaryFocus) {
currentFocus.unfocus();
}
},
The code should be:
onTap: () {
final FocusScopeNode currentScope = FocusScope.of(context);
if (!currentScope.hasPrimaryFocus && currentScope.hasFocus) {
FocusManager.instance.primaryFocus.unfocus();
}
},
In Flutter I want to create an app bar that looks as follows:
I've easily managed to add the 2 icons on the left and right, but I am struggling to create a rectangle in the middle.
I've tried the following code:
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
leading: IconButton(
icon: Image.asset('assets/images/maps.png'),
onPressed: () => {},
),
title: Expanded( // The bit that's not working. A rectangle that fills the middle area.
child: Container(
color: Colors.blue,
),
),
actions: <Widget>[
IconButton(
icon: Image.asset('assets/images/search.png'),
onPressed: () => {},
),
],
),
);
but I get the following exception:
Expanded widgets must be placed inside Flex widgets.
Expanded(no depth, flex: 1, dirty) has no Flex ancestor at all.
Thanks for the help.
You can achieve this by setting the centerTile attribute of the AppBar to true
Like this
import 'package:flutter/material.dart';
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
centerTitle: true,
leading: IconButton(
icon: Icon(
Icons.location_on,
color: Colors.grey,
),
onPressed: () => {},
),
title: Container(
padding: EdgeInsets.all(10),
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Icon(Icons.refresh),
Expanded(
child: Center(
child: Text("London"),
),
),
Opacity(child: Icon(Icons.refresh), opacity: 0,),
],
),
decoration: BoxDecoration(
color: Colors.grey, borderRadius: BorderRadius.circular(10)),
),
actions: <Widget>[
IconButton(
icon: Icon(
Icons.search,
color: Colors.grey,
),
onPressed: () => {},
),
],
),
);
}
}
The output:
An alternative solution (inspired by #Josteve Adekanbi answer), to create a rectangle that fills the title area is:
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
leading: ...
title: Container(
width: double.infinity,
height: 40,
child: Container(
color: Colors.blue,
),
),
actions: ...
),
);
I want to design a page for my Flutter app that can be displayed with the same aspect on all screen devices without having to scroll to see the bottom of the page. In the left image below you can see the result of my code :
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
textTheme: TextTheme(
headline: TextStyle(fontSize: 64.0),
subhead: TextStyle(fontSize: 48.0),
title: TextStyle(fontSize: 36.0),
subtitle: TextStyle(fontSize: 24.0),
button: TextStyle(fontSize: 24, color: Colors.white),
body1: TextStyle(fontSize: 18.0, color: Colors.black),
body2: TextStyle(fontSize: 14.0, color: Colors.black),
),
),
home: Scaffold(
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 16.0),
child: IconButton(
icon: Icon(Icons.settings),
onPressed: () {
Navigator.pushNamed(context, '/settings');
},
),
),
],
),
Text(
'My Title Here',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 64.0),
),
TextField(
style: Theme.of(context).textTheme.body1,
),
TextField(
style: Theme.of(context).textTheme.body1,
),
RaisedButton(child: Text('Start'), onPressed: () {}),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
IconButton(
icon: Icon(Icons.star),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.star),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.star),
onPressed: () {},
),
],
),
],
),
),
),
);
}
}
It's very simple, and it's looking fine, but when I clicked on the second TextField, I have a problem of overflow like you can see in the right image : (I made my test on an iPhone 5s).
I tested to add a SingleChildScrollView, a SafeArea but when I do that I have a big blank space at the bottom of the screen and it's not what I m looking for. How can I solve this ?
Thanks for your help
Hi this is a closed issue on Flutter repo. Replace your column with ListView and instead of using alignment property add paddings and margins to your textfield
OR
You can use SingleChildScrollView as you said in the question
Both the cases you need to add padding to textField to fill the blank space