I used the debugShowCheckedModeBanner: false, code to remove the debug banner and it had worked fine with all of my previous apps. But now when I used this code only the shadow under debug banner get removed.
Here's my code
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomeScreen(),
);
}
}
I have attached the images link of debugShowCheckedModeBanner: false, and debugShowCheckedModeBanner: true,below.
How can I remove this debug banner completely, please help!
Try below code hope its help to you.
Remove MaterialApp Widget from HomeScreen Class
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: HomeScreen(),
),
),
);
}
}
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('E Com App'),
),
body: Container(
color: Colors.red,
height: 200,
width: double.infinity,
child: Text(
'Red Container',
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
),
);
}
}
Your Result Screen->
If you want MaterialApp Widget in HomeScreen class then add below line inside MaterialApp in HomeScreen Class.
debugShowCheckedModeBanner: false,
Full Widget:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: HomeScreen(),
),
),
);
}
}
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text('E Com App'),
),
body: Container(
color: Colors.red,
height: 200,
width: double.infinity,
child: Text(
'Red Container',
style: TextStyle(fontSize: 30, color: Colors.white),
),
),
),
);
}
}
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
//this code add it
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: HomeScreen(),
),
),
);
}
}
Related
import 'package:expense_management/widgets/user_transaction.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter App',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter App'),
),
body: Column(
children: <Widget>[
Container(
width: double.infinity,
child: const Card(
color: Colors.orange,
elevation: 5,
child: Text('chart'),
),
),
userTransaction()
],
));
}
}
error--------------------
The following Unimplemented Error was thrown building Keyed
Subtree-[GlobalKey#87727]: UnimplementedError
The relevant error-causing widget was: Scaffold
Scaffold:file:///C:/Users/abhargaw/Downloads/development/projects/expense_management/lib/main.dart:21:1
2
Here is a demonstration of the problem:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return const Scaffold(
body: Center(
child: Text(" hello ",
style: TextStyle(
fontSize: 100,
backgroundColor: Colors.green,
)),
),
);
}
}
It shows up like this:
So far I've tried this on web and macOS targets and got the same result.
How can I make the Text widget include the space at the end?
Here's what I mean.
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return const Scaffold(
body: Center(
child: Container(
color: Colors.green,
child: Text(" hello ",
style: TextStyle(
fontSize: 100,
backgroundColor: Colors.green,
))),
),
);
}
}
First, here is an example without using a theme. I can put const on MaterialApp.
import 'package:flutter/material.dart';
void main() {
runApp(const _MyApp());
}
class _MyApp extends StatelessWidget {
const _MyApp({super.key});
#override
Widget build(BuildContext context) {
return const MaterialApp( // 👈 const
home: Scaffold(
body: Center(
child: Text(
"Demo",
),
),
),
);
}
}
Next, here is an example of using the theme.
It is no longer possible to put const on MaterialApp.
Instead, only Scaffold has const.
import 'package:flutter/material.dart';
void main() {
runApp(const _MyApp());
}
class _MyApp extends StatelessWidget {
const _MyApp({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp( // 👈 remove const
theme: ThemeData(
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
),
home: const Scaffold( // 👈 const
body: Center(
child: Text(
"Demo",
),
),
),
);
}
}
Why do I have to remove const from MaterialApp if I use a theme?
Does this simply mean that the theme cannot be determined at compile time?
Since I am only specifying the color, it seems like it could be determined at compile time.
For example, if it is text, I can leave the const attached to MaterialApp as shown below.
import 'package:flutter/material.dart';
void main() {
runApp(const _MyApp());
}
class _MyApp extends StatelessWidget {
const _MyApp({super.key});
#override
Widget build(BuildContext context) {
return const MaterialApp(
home: Scaffold(
body: Center(
child: Text(
"Demo",
style: TextStyle(color: Colors.red),
),
),
),
);
}
}
ThemeData doesn't have a const constructor, this is because the constructor atually has an inner logic to change some internal values, if you want to use const you can use the other constructor ThemeData.raw but you will need to pass all the required values:
import 'package:flutter/material.dart';
void main() {
runApp(const _MyApp());
}
class _MyApp extends StatelessWidget {
const _MyApp({super.key});
#override
Widget build(BuildContext context) {
return const MaterialApp(
theme: ThemeData.raw(
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
/// it will ask you to complete the constructor
),
home: Scaffold(
body: Center(
child: Text(
"Demo",
),
),
),
);
}
}
TLDR: for a const constructor to work you need that all it's parameters are const values but ThemeData is not.
My code is:
import 'package:flutter/material.dart';
void main() => runApp(BMICalculator());
class BMICalculator extends StatelessWidget {
#override
Widget build(BuildContext context) {
final ThemeData theme = ThemeData();
return MaterialApp(
theme: theme.copyWith(
colorScheme: theme.colorScheme.copyWith(
secondary: Colors.purple,
primary: Color(0xFF0d0f1e),
background: primaryC,
),
),
home: InputPage(),
);
}
}
class InputPage extends StatefulWidget {
#override
_InputPageState createState() => _InputPageState();
}
class _InputPageState extends State<InputPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('BMI CALCULATOR'),
),
body: Center(
child: Text('Body Text'),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
),
);
}
}
And I have no idea why the background color of my app won't turn into the black/purple color I have set for it. I am following a tutorial that was using the depricated theme: ThemeData but I can't find the reason why my background color isn't changing for the scaffold.
To set a background color for your Scaffold, you can set the scaffoldBackgroundColor in your ThemeData.
Using your example:
import 'package:flutter/material.dart';
void main() => runApp(BMICalculator());
class BMICalculator extends StatelessWidget {
#override
Widget build(BuildContext context) {
final ThemeData theme = ThemeData();
return MaterialApp(
theme: theme.copyWith(
// Pick the color here
scaffoldBackgroundColor: Colors.black,
colorScheme: theme.colorScheme.copyWith(
secondary: Colors.purple,
primary: Color(0xFF0d0f1e),
),
),
home: InputPage(),
);
}
}
class InputPage extends StatefulWidget {
#override
_InputPageState createState() => _InputPageState();
}
class _InputPageState extends State<InputPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('BMI CALCULATOR'),
),
body: Center(
child: Text('Body Text'),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
);
}
}
How to navigate tab from another dart file button tap event? I am using Tabmanager. It only works with the same dart file.
I am having error in
TabManager._myTabbedPageKey.currentState._tabController
.animateTo(1);
main.dart
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key key}) : super(key: key);
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
],
),
title: Text('Tabs Demo'),
),
body: TabBarView(
children: [
new TabA(),
new TabB(),
],
),
),
),
);
}
}
class TabManager extends StatefulWidget {
static final _myTabbedPageKey = new GlobalKey<_MyAppState>();
#override
_TabManagerState createState() => _TabManagerState();
}
class _TabManagerState extends State<TabManager> {
#override
Widget build(BuildContext context) {
return new MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
home: new MyApp(
key: TabManager._myTabbedPageKey,
),
);
}
}
Here tabA.dart is a separate dart file.
An error shows like
The getter '_myTabbedPageKey' isn't defined for the type 'TabManager'.
tabA.dart
class TabA extends StatefulWidget {
#override
_TabAState createState() => _TabAState();
}
class _TabAState extends State<TabA> {
#override
Widget build(BuildContext context) {
return Container(
child: GestureDetector(
onTap: () {
TabManager._myTabbedPageKey.currentState._tabController
.animateTo(1);
},
child: Text('taba')),
);
}
}
Try to This Code very similar
working demo
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(text: 'Home'),
Tab(text: 'Messages',),
Tab(text: 'Call'),
],
),
title: Text('MY App'),
),
body: TabBarView(
children: [
new Home(),
new Messages(),
new Call()
],
),
),
),
);
}
}
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child:
Text('Home',
style: TextStyle(fontSize: 21),)
)
)
);
}
}
class Messages extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child:
Text('Meassage',
style: TextStyle(fontSize: 21),)
)
)
);
}
}
class Call extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child:
Text('Call',
style: TextStyle(fontSize: 21),)
)
)
);
}
}