I'm trying to use RawKeyboardListener on iOS, looking here leads me to believe this is something that is supported now. However, I don't see onKey getting called at all when any soft key press occurs on iOS.
What am I missing?
Example
FTL
import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return RawKeyboardListener(
focusNode: FocusNode(),
onKey: (event) {
print('Keyboard event detected');
},
child: const TextField(),
);
}
}
Related
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.
not sure if it's possible to have a widget added as an element in a list. Can someone take a look at what might be wrong? I have no clue how I can refer to this sample widget. Code
I've tried to add this widget to a class and tried to take apart the widget but without any result.
I tried to replicate your problem. It seems it works. Try this:
import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(FirstWidget(title: 'Test', widget: MyWidget()));
}
class FirstWidget extends StatelessWidget {
final String title;
final Widget widget;
FirstWidget({required this.title, required this.widget});
final List<FirstWidget> contents = [FirstWidget(title: 'Test', widget: MyWidget())];
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container();
}
}
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),
),
);
}
}
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(),
),
),
);
}
}
Testing the same code with Flutter 1.20.0 we have different behavior (the correct one). I also believe maxLength should be respected all the time.
sample code:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
body: Center(
child: TextField(
inputFormatters: [
LengthLimitingTextInputFormatter(5),
],
maxLength: 5,
),
),
),
);
}
}