I'm developing an app using Flutter, and I want to make sure it is accessible.
I have a drawer that I'm using as a navigation menu. When it is open and I use the screen reader the screen reader reads out: "Dismiss", "Home", "Conversations". I tried adding a semanticLabel, but it does not get read.
Here's a picture of the app and where I'm targeting with the screen reader
I want it to read out that the navigation menu is open, or at least change the "Dismiss" to something more informative like "Close navigation menu".
Where can I edit the "Dismiss" text, or where else can I add screen readable text to the drawer so users know when it is open?
My code for the drawer is as such:
Scaffold(
endDrawer: SizedBox(
width: 200,
child: Drawer(
semanticLabel: "Navigation Menu",
child: ListView(children: <Widget>[
ListTile(
title: Text("Home"),
onTap: () {
Navigator.pop(context);
}),
ListTile(
title: Text("Conversations"),
onTap: () {
Navigator.pop(context);
}
)
],
))),
appBar: AppBar(
...
Related
How to add whatsapp image in floating action button in flutter because whatsapp icon is not in flutter icon list. Tell me a simple method.
Row(
children: [
FloatingActionButton(
child: const Icon(Icons.chat),
backgroundColor: Colors.green.shade800,
onPressed: () {
String url =
"https://wa.me/+923045873730/?text=Hello";
launch(url);
},
),
],
),
Font Awesome has a flutter package that helps with most icons that are not in flutter default icon set, https://pub.dev/packages/font_awesome_flutter. It also includes all icons listed in font Awesome Offical website https://fontawesome.com/icons
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
Row(
children: [
FloatingActionButton(
child: FaIcon(FontAwesomeIcons.whatsapp),
backgroundColor: Colors.green.shade800,
onPressed: () {
String url =
"https://wa.me/+923045873730/?text=Hello";
launch(url);
},
),
],
),
The easiest way that comes to my mind is that downloading the icon image of Whatsapp (from flaticon or other website), adding it to the project's assets and adding it as a child( for example asset image).
I am using flutter for development and I want to send app to background or close it when user clicks on back icon on appbar
I have used this answer for reference but apart from exit(0) is nothing working, which is not recommended in iOS.
I have tried following recommendations from other answers but none of it working on iOS.
Navigator.of(context).pop();
Navigator.of(context).maybePop();
Navigator.of(context, rootNavigator: true).pop(context);
Navigator.pushReplacementNamed(context, '/route');
SystemNavigator.pop();
Navigator.pop(context,true);
SystemChannels.platform.invokeMethod('SystemNavigator.pop');
for android following is working properly.
SystemNavigator.pop();
What should I use to close the app within apple guidelines.
EDIT
SystemNavigator.pop(); gives black screen in iOS.
Try this
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.black),
onPressed: () => Navigator.of(context).pop(),
),
title: Text("Sample"),
centerTitle: true,
),
I am an absolute beginner to Flutter !
Picture# 1 : Reference from tutorial.
Picture# 2 : My implementation.
Virtual Device: Nexus_5X_API_28
Android: 9.0
Are you sure you are using the same emulator in both examples?
The title in MaterialApp Widget isn't the title you will see in the Application Bar.
used by the device to identify the app
as documentation says.
So Maybe it is how the device displays 'running applications menu'.
If you want to display the appBar you need to use Scaffold
void main() => runApp(
MaterialApp(
title: 'App',
home: Scaffold(
appBar: AppBar(
title: Text('My App'),
),
body: Center(
child: Text("text"),
),
),
),
);
I am trying to use Navigator.pop(context); in an appbar but the problem is that it shows a black screen and then you have to press the back button on android then it pops current black screen, so where is this black screen coming from that I don't know and in iPhone there is no back button so that why it is stuck in that screen. Please do help me
This is the code where I am using this Navigator code.
#override
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Color.fromRGBO(30, 30, 30, 1.0),
appBar: new AppBar(
elevation: 0.0,
backgroundColor: Color.fromRGBO(30, 30, 30, 1.0),
actions: <Widget>[
new IconButton(
icon: Icon(Icons.settings_power),
onPressed: () {
Navigator.pop(context);
}),
],
title: new Text(
"PROLOG",
style: new TextStyle(color: Colors.white),
),
centerTitle: true,
),
);
}
and the most strange thing is that I am using this piece of code in another class its working fine. So where is the problem...
The reason why you're getting a black/blank screen after calling Navigator.pop(context) is because there's no widget/screen beyond the current Navigator stack.
In Flutter, SystemChannels.platform.invokeMethod('SystemNavigator.pop') is used to remove the topmost Flutter instance. As mentioned in the docs, the method should remove the current Activity from the stack in Android. The behavior is a bit different on iOS though.
If you're trying to implement this function to close the app, this is highly discouraged. This is pointed out on Apple's archived doc. I'm trying to search for an updated reference, but navigating through Apple's Developer docs is challenging.
Anyway, I've made some changes to your code snippet if you'd like to try this out.
Add this in your imports
import 'dart:io' show Platform, exit;
As for the code, exit(int) is used for iOS. It's recommended to use an exit code from the range 0...127 as mentioned in the docs. While SystemChannels.platform.invokeMethod('SystemNavigator.pop') is used for other platforms (mainly Android in this case).
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Color.fromRGBO(30, 30, 30, 1.0),
appBar: new AppBar(
elevation: 0.0,
backgroundColor: Color.fromRGBO(30, 30, 30, 1.0),
actions: <Widget>[
new IconButton(
icon: Icon(Icons.settings_power),
// if Platform is iOS call exit(0)
// else call the preferred method
// https://api.flutter.dev/flutter/services/SystemNavigator/pop.html
onPressed: () => Platform.isIOS
? exit(0)
: SystemChannels.platform.invokeMethod('SystemNavigator.pop'),
),
],
title: new Text(
"PROLOG",
style: new TextStyle(color: Colors.white),
),
centerTitle: true,
),
);
}
Demo
Hy Guys, I'm currently developing an app with Flutter and i'm in the profile Page. I wan't to be able to navigate from the profile page to the settings page without it changing the bottom navigation bar Something Like this
NOTE: The navigation happens within the same tab. I'm not asking for how to switch between tabs
in the Bottom Navigation Bar the pages are the tabs
and this is a full example
new Scaffold(
body: new TabBarView(
children: <Widget>[new FirstTab(), new SecondTab(), new ThirdTab()],
controller: controller,
),
bottomNavigationBar: new TabBar(
tabs: <Tab>[
new Tab(
icon: new Icon(Icons.favorite),
),
new Tab(
icon: new Icon(Icons.adb),
),
new Tab(
icon: new Icon(Icons.airport_shuttle),
),
])