Hi I have bean creating a new Flutter project, but in some of screen sizes of the Status bar and the Toolbar has a space between themselves, how can I solve it?
import 'package:flutter/material.dart';
class MapPage extends StatelessWidget {
const MapPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Map"),
),
);
}
}
It's the space for the cutout on device
You need to turn off Simulate display with cutout in developper settings, or edit your manifest app like showed here
https://developer.android.com/guide/topics/display-cutout
Related
I'm developing a flutter app using Bloc, Division, and Get for the navigation.
I have a text field reusable component that I use in most of the fields that I create, the text field works properly on iOS without any issues, but on Android the Keyboard immediately disappear when I tap the field.
Here are the things that I've done but it still doesn't work:
Not using text field from the component, but directly create another one on the page
Create my own testing page that only used to test the text field
Using resizeToAvoidBottomInset: false, defined the controller as a static final
The only thing that works is when I create another flutter project from the start.
my-testing.dart
import 'package:flutter/material.dart';
class MyTesting extends StatefulWidget {
const MyTesting({Key? key}) : super(key: key);
#override
State<MyTesting> createState() => _MyTestingState();
}
class _MyTestingState extends State<MyTesting> {
late TextEditingController controller;
#override
void initState() {
controller = TextEditingController();
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Just testing'),
),
body: Padding(
padding: const EdgeInsets.all(20),
child: TextField(
controller: controller,
),
),
);
}
}
When I use Share.share using Flutter share_plus package the app bar disappears and the content of the screen moves up...and it doesn't look very nice.
Simple example:
import 'package:flutter/material.dart';
import 'package:share_plus/share_plus.dart';
class Example extends StatelessWidget {
const Example({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () async {
await Share.share('Some text');
},
child: const Text('Press me'),
);
}
}
Anyone knows why that happens?
Try SafeArea around Scaffold widget.
Try this out It works fine for me
final RenderBox box = context.findRenderObject() as RenderBox;
Share.share(shareURL,
subject: title,
sharePositionOrigin: box.localToGlobal(Offset.zero) & box.size);
I'm trying to find the coordinates for the screen while I'm outside of the app. I found a way to get the coordinates inside the app by this way.
import 'dart:io';
import 'package:flutter/material.dart';
import 'dart:async';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
home: new MyHomePage(),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
GlobalKey key = GlobalKey();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Material(
child: Listener(
child: SizedBox.expand(
key: key,
child: GestureDetector(
onPanUpdate: (details) {
print(details.globalPosition);
},
),
),
),
),
);
}
}
I/flutter ( 9587): Offset(149.4, 182.0)
I/flutter ( 9587): Offset(148.6, 182.8)
I/flutter ( 9587): Offset(148.6, 183.4)
This obviously works inside the app. Is there a way to know the same positions outside of the app. That means like Even shows the location when dragged in the home screen or any other app
Is the way to do it by creating a background service? if so How do you get the app screen(1st picture) and phone screen meaning working any where on the phone(2nd image) to work together?
Edit: Is there a way to get the pointer location data from settings > Developer options > Input > Pointer location
Any help would be appreciated!
Maybe you can try pyautogui. position but this work only for your desktop screen, but if you have an Android studio you can try it and after this, you can calculate the position of your android screen you need not the screen resolution of your desktop, and if you put an Android emulation to corner you can easily calculate with this math operation 1:x(times2. Or if you have only mobile devices you can try some apps in PlayStore
import time
import pyautugui as pg
time.sleep(5)
print(pg.position())
In my flutter project (latest version), I use a physical android device for development. But in my phone, in the flutter debug app, a semi transparent black overlay is always showing... I tried to run a new project & there also was an overlay.. I don't know if it is the issue with my flutter sdk or my device.
My Code so far
//main.dart
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Home(),
);
}
}
Other widgets
//home.main.dart
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
title: Text("SHKSC", style: TextStyle(color: Colors.indigoAccent[50])),
iconTheme: IconThemeData(color: Colors.blue, opacity: 0.7),
),
body: HomeBody(), /* Incoming from home.body */
);
}
}
The image of the running app on my physical device in Scrcpy..
ImageLink
I want my app to simulate the rounded display corners most modern day smartphones have by rounding the corners of the app and making the background black.
Currently, the TikTok app has something like this.
I already tried using the borderRadius property of the Material widget and wrapping the contents into a container with rounded corners. Neither one worked for me.
Any ideas how this could be done?
I would use ClipRRect at the up most level:
Here is a full example:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: MyHomePage(title: 'Flutter Demo Home Page')),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Something")),
body: Container(alignment: Alignment.center, color: Colors.blue, child: Text("hello")));
}
}
And here is the result:
Maybe you will want to reduce the radius from 20 to something like 8 to have the result similar to the image you provided.