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"),
),
),
),
);
Related
I’m new to Flutter and I’m trying to do something that looks like this for my app :
So that I can switch between them and they will display two different pages.
What’s this template called ? Can you link me to some websites that could help code it.
Thank you!
It's called tabs or tab bar. Check out the documentation
https://docs.flutter.dev/cookbook/design/tabs
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: const TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
),
),
),
);
When enter task menu(android), it shows "Flutter Demo" instead of my app label string in Manifest xml file. In the screen pages, I used scaffold with no app bar, hence no title, but there's safe area widget inside.
Where shall I edit in order to have custom app tile name.
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: SafeArea(
child: Column(
In MaterialApp() you have title property. You should change it in there.
MaterialApp(
title: 'HERE GOES YOUR TITLE',
home: Scaffold(
appBar: AppBar(
title: const Text('MaterialApp Theme'),
),
),
);
first of all use MaterialApp Widget and warp your whole Widget tree in MaterialApp widget
MaterialApp(
title: 'your app name',
home: Scaffold(
then edit name and description property in pubspec.yaml
name: your app name
description: your app description
then chnage android:label in AndroidManifest.xml
<application
android:label="your application name"
after all run flutter clean command and then flutter build
Try changing the name in pubspec.yaml file also like this
1) Open pubspec.yaml file.
2 Scroll to top .
3) change the name field to your app name which want to set
4) and set tile like this also
MaterialApp(
title: 'your app name',
home: Scaffold(
I have a MultiBlocProvider assigned for an app that has a Bottom Navigation Bar to navigate through main routes like Home, Search, Wishlist ...
I use setState(){} to change the currentPage for each route.
Recently I've added Blocs to each of them by using flutter_bloc package and I'm using BlocProvider to provide the bloc to each BlocBuilder,
#override
Widget build(BuildContext context) {
return SafeArea(
top: false,
child: Scaffold(
key: _scaffoldKey,
body: PageStorage(
child: Stack(
children: <Widget>[
AnimatedSwitcher(
duration: Duration(milliseconds: 200),
child: BlocProvider<WishlistBloc>(
create: (BuildContext context) => WishlistBloc(WishlistRepository()),
child: currentPage),
),
bottomBar(currentPageScroll)
],
),
bucket: bucket,
),
),
);
}
Is it ok to use MultiBlocProvider to provide all the BlocsProviders I need?
they could be more than 10 providers, would it affect the performance of the app?
It's definitely OK, MultiBlocProvider created for this purposes. But you need to understand, that if you with your creation also send(for e.x.) initialize event which started loading in all 10 blocs some data you will have some issues. So, if you will have some performance issues, please create separate SO question and community will help to find root-cause of this.
So I'm running the following code and no text is displayed on the emulator screen, the example app showed absolutely no text on screen. If I ran the app without a degugger attached, the text was there but disappeared when a refresh was made.
Same thing happens with API 24, 27, 28. On API 28 I didnt have any text in the home screen of the OS and sometimes half of the clock text was missing and half was there (like clock showed up as " :22" instead of "10:22"), app titles text under their icons was missing.
Tried reinstalling devices and downloading new images. Same thing happens if running with xamarin.
Some images showcasing the problem: https://imgur.com/a/OigLsCE
Has anyone had to deal with this before?
import 'package:flutter/material.dart';
void main() => runApp(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: Center(
child: Text('Hello World'),
),
),
);
}
}
Try changing the renderer in the emulator settings:
answer from https://www.reddit.com/r/androiddev/comments/dc8n2a/missing_text_in_android_emulator/f29dk6z?utm_source=share&utm_medium=web2x&context=3
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