I have a problem when I want to fill a TextView and the keyboard shows up, the scaffold is squeezing to the left.
Anybody have a clue about that ?
This is my code:
#override
Widget build(BuildContext context) {
final authentCubit = context.watch<AuthentificationCubit>();
final UserRepository user = UserRepository();
print(user.getUserName());
return Scaffold(
resizeToAvoidBottomPadding: false,
appBar: AppBar(
title: Text('First Route'),
),
body: Center(
child: Column(
children: <Widget>[
ElevatedButton(
child: Text('Deconnexion'),
onPressed: () {
authentCubit.signOut();
},
),
ElevatedButton(
child: Text('Formulaire contact'),
onPressed: () {
showDialog(context: context,builder: (context)=> ContactForm());
},
),
TextField(),
],
),
),
);
}
}
This is a screen of my problem
Thank you
Had two scaffold in my tree, this is why "resizeToAvoidBottomPadding: false," wasn't working.
Related
So this is what I got so far. Basically, I want to display the card once the user taps on the FAB. Now, when I tap on the FAB, there's no response.
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
appBar: AppBar(
actions: <Widget>[
IconButton(
icon: Icon(Icons.exit_to_app),
onPressed: () => logoutUser().then((value) =>
Navigator.of(context).pushReplacementNamed('/SignIn')),
)
],
title: Text('TODO'),
),
body: Container(),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add), onPressed: () => displayCard()),
);
}
Widget displayCard() {
return Center(
child: Card(
color: Colors.blue,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
leading: Icon(Icons.album),
title: Text('The Enchanted Nightingale'),
subtitle: Text('Music by Julie Gable. Lyrics by Sidney Stein.'),
),
],
),
),
);
}
Right now, you're returning a Widget to your onPressed function, which is a VoidCallBack. It won't do anything with the Widget it receives back from displayCard().
Consider using a Dialog popup. Replace your widget displayCard() with something like the following.
void displayCard(BuildContext context) {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text("The Enchanted Nightingale"),
content: Text("Music by Julie Gable. Lyrics by Sidney Stein."),
actions: <Widget>[
FlatButton(
child: Text("Dismiss"),
onPressed: () {
//remove the dialog popup
Navigator.of(context).pop();
}
)
]
);
}
);
}
Then, update your floatActionButton code to pass context as a parameter
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add), onPressed: () => displayCard(context)),
I want a popup menu or some kind of slide screen with options to come when i click on an icon in the app bar, however i dont want to use PopMenuButton as i dont want to use that icon. How can I do this?
My code
return new Scaffold(
appBar: new AppBar(
title: new Text("Home"),
leading: IconButton(
icon: Icon(
Icons.dehaze,
color: Colors.black,
),
onPressed: () {
// do something
},
),
),
body: new Center(...),
);
#Denise, you don't need to manually create a button and assign action for drawer menu. You can simply use drawer in Scaffold with Drawer widget like so,
class MyAppState extends State<MyApp> {
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Test'),
),
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);
},
),
],
),
),
body: Padding(
padding: EdgeInsets.all(20.0),
child: Center(
child: Column(
children: <Widget>[
Text('')
],
)
)
),
)
);
}
}
And if you wanna use different icon,
class MyAppState extends State<MyApp> {
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: Text('Test'),
leading: new IconButton(
icon: new Icon(Icons.dehaze),
onPressed: () => _scaffoldKey.currentState.openDrawer()),
),
drawer: Drawer(......
Hope this helps.
If the icon is the problem in PopMenuButton. You can change it by assigning icon attribute in PopMenuButton.
PopupMenuButton<Choice>(
onSelected: _select,
icon:Icon(
Icons.dehaze,
color: Colors.black,
),
itemBuilder: (BuildContext context) {
return choices.skip(2).map((Choice choice) {
return PopupMenuItem<Choice>(
value: choice,
child: Text(choice.title),
);
}).toList();
https://flutter.dev/docs/catalog/samples/basic-app-bar
How do I set the distance between snackbar and floating action button?
you can't set it !! it's the same as from the bottom plus the SnackBar height .
but if you want to adjust it you may not use the FAB from the Scaffold but instead make the body a Stack and the latest layer is your FAB and wrap it inside a AnimatedPositioned so you can animate it with the proper distance from the bottom as you want .
Are you tried
floatingActionButton: Column(mainAxisAlignment: MainAxisAlignment.end, crossAxisAlignment: CrossAxisAlignment.end, children: [
FloatingActionButton(
onPressed: _doOrder,
mini: false,
elevation: 10,
child: Icon(EvaIcons.shoppingBagOutline),
),
Container(
height: 50,
)
]),
If you want the FloatingActionButton to always have a bottom padding, you could just wrap it with a Padding widget like this:
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: Padding(
padding: EdgeInsets.only(bottom: 40.0),
child: FloatingActionButton(
onPressed: () {},
),
),
appBar: AppBar(
title: Text('SnackBar'),
),
body: Builder(
builder: (context) => RaisedButton(
onPressed: () => _displaySnackBar(context),
child: Text('Show SnackBar'),
),
),
);
}
If you want the FloatingActionButton to have a new padding when the SnackBar is visible, you could change the padding when you show the SnackBar like this:
double _fabPadding = 0.0;
_displaySnackBar(BuildContext context) {
final snackBar = SnackBar(content: Text('SnackBar'));
setState(() {
_fabPadding = 40.0;
});
Scaffold.of(context).showSnackBar(snackBar).closed.then((_) {
setState(() {
_fabPadding = 0.0;
});
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: Padding(
padding: EdgeInsets.only(bottom: _fabPadding),
child: FloatingActionButton(
onPressed: () {},
),
),
appBar: AppBar(
title: Text('SnackBar'),
),
body: Builder(
builder: (context) => RaisedButton(
onPressed: () => _displaySnackBar(context),
child: Text('Show SnackBar'),
),
),
);
}
Edit: If you want to avoid the SnackBar push the position of the FloatingActionButton you could set the behavior property of the SnackBar to SnackBarBehavior.floating
SnackBarBehavior
floating → const SnackBarBehavior This behavior will cause SnackBar to
be shown above other widgets in the Scaffold. This includes being
displayed above a BottomNavigationBar and a FloatingActionButton.
Trying to set : behavior: SnackBarBehavior.floating
It may worked
SnackBar(behavior: SnackBarBehavior.floating, content: Padding(child: Text(message),
padding: EdgeInsets.only(bottom: 30),)));
You can attach the snackbar to the scaffold with a key.
eg:-
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
void showSnackBar(String text) {
_scaffoldKey.currentState.showSnackBar(SnackBar(
content: Text(
text,
textAlign: TextAlign.center,
),
duration: Duration(seconds: 0, milliseconds: 750),
));
}
And then add the key to the scaffold:
Scaffold(
key: _scaffoldKey,
...
);
You can now call this function from anywhere.
I have a Flutter project which uses material design, that as I go through routes the appbar will show the backbutton. Recently, I just implemented a drawer in my project, and the drawer icon overrides the back icon. I essentially want to undo this, showing the back button, for certain screens, and show the menu button for other screens, almost like when I define the drawer having a showIcon: false property? I understand this post is a similar question, but no code is shown for the question or the solution... My drawer looks like this:
return Scaffold(
//appbar is here
appBar: AppBar(
title: Text("Title"),
),
drawer: drawer,
body: _buildBody(),
);
And I define drawer here:
var drawer = Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
//My listTiles and UserAccountsDrawerHeader are removed for simplicity
],
),
);
Thanks for any help.
Short answer:
AppBar(
leading: IconButton(
onPressed: () {}, // Handle your on tap here.
icon: Icon(Icons.arrow_back_ios),
),
)
Screenshot:
Full code:
void main() => runApp(MaterialApp(home: MyPage()));
class MyPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Column(
children: <Widget>[
ElevatedButton(
onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (_) => Page1())),
child: Text("Go to Drawer Page"),
),
ElevatedButton(
onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (_) => Page2())),
child: Text("Go to Back button Page"),
),
],
),
),
);
}
}
// This has drawer
class Page1 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
drawer: Drawer(),
);
}
}
// This has back button and drawer
class Page2 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () => Navigator.pop(context),
),
),
drawer: Drawer(),
);
}
}
AppBar(
leading: Builder(
builder: (BuildContext context) {
return IconButton(
icon: const Icon(Icons.arrow_back),
onPressed: () { Navigator.pop(context); },
);
},
),
)
I have a Scaffold with a simple Drawer in which I show a menu where a user can press a button. When this button is pressed I want to display a SnackBar, but the SnackBar is always displayed behind the Drawer. Is there some way to show it in front of the Drawer?
The drawer's code looks like:
class MyDrawer extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Drawer(
child: ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.lock_open),
title: Text('Click Me'),
onTap: () {
Scaffold.of(context).showSnackBar(SnackBar(
content: Text(
'Test.',
)));
},
),
],
),
);
}
}
and it is used directly in the Scaffold:
return Scaffold(
drawer: MyDrawer(),
[...]
They said Drawer must be on the top of UI under MaterialDesign rules. But if you wanna such behaviour too much you can write own SnackBar.
static void showSnackBarAsBottomSheet(BuildContext context, String message)
{
showModalBottomSheet<void>(
context: context,
barrierColor: const Color.fromRGBO(0, 0, 0, 0),
builder: (BuildContext context) {
Future.delayed(const Duration(seconds: 5), () {
try {
Navigator.pop(context);
} on Exception {}
});
return Container(
color: Colors.grey.shade800,
padding: const EdgeInsets.all(12),
child: Wrap(children: [
Text(
message,
style:
GoogleFonts.robotoCondensed().copyWith(color: Colors.white),
)
]));
},
);
}
I've solved it by adding one more Scaffold inside Drawer and making its background transparent:
return Scaffold(
drawer: Scaffold(
backgroundColor: Colors.transparent,
body: MyDrawer(),
[...]