Adjusting the size of the web on the flutter - flutter

Can you adjust the execution size of the Chrome browser on the flutter? I want to be able to adjust the size of my web program to smaller like a messenger program.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'basic',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: 0.5625*360,
height: 360,
child: Container(
color: Colors.greenAccent,
),
),
);
}
}

You don't need to think about size because during the debug mode app size is always larger but when you make a release build it will decrease.

Related

How can I make Flutter Text show trailing space?

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,
))),
),
);
}
}

Flutter's RawKeyboardListener on iOS

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(),
);
}
}

Dart Flutter display Icons

Im writing my first code and I want to display a Icon, and I try to use the command Icon (Icons.star, color: Colors.red, size: 100, ),. But it doesn't work. Can somebody help me. Thx
Welcome to Stackoverflow.
Try the following code. Your above code is also correct.
Try to check below line in your pubspec.yaml file
flutter:
uses-material-design: true
Refer Flutter Icons
Full Example:
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: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Center(
child: Icon(
Icons.star,
color: Colors.red,
size: 100,
),
);
}
}
Result screen->
You can also test the code on Dartpad.

Cant remove Debug Show Checked Banner

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(),
),
),
);
}
}

A value of type 'dart.core::int' can't be assigned to a variable of type 'dart.core::double' when using flutter flare

I am trying out the new flare 2d dimensions for Flutter.
Here is my code
import 'package:flutter/material.dart';
import 'package:flare_flutter/flare_actor.dart';
main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: "Flutter Flare",
debugShowCheckedModeBanner: false,
theme: ThemeData(primarySwatch: Colors.blue),
home: FlareDemo(),
);
}
}
class FlareDemo extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: FlareActor(
"assets/circular.flr",
animation: "circular",
fit: BoxFit.contain,
),
),
);
}
}
The circular.flr file is created in 2d dimensions and exported as a binary for flutter. When I run the app I get error as follows
A value of type 'dart.core::int' can't be assigned to a variable of type 'dart.core::double'.
and the error occurs in flare_actor.dart file which comes from the flare_flutter: dependency.I am not getting any compile time error and I have included flare_flutter: and circular.flr in my pubspec.yaml file