I need a way to make a button or a container that can still be visible even when I close the app like so: . But this is just simply impossible in flutter. So what I've been doing is making a platform channel on my app and trying to make the container and button with native components. But I've been using kotlin and do not know much about this programming language. Is there a way for my code to be able to make such widgets?(I would thank you so much if you could edit my full code.)
Full Code:
Flutter:
class FloatingContainer extends StatelessWidget {
static const platform = const MethodChannel('flutter.App.com.channel');
#override
Widget build(BuildContext context) {
return Container ();
}
Future<Null> _showNativeView() async {}
}
Kotlin:
package com.example.swipe
import android.os.Bundle
import io.flutter.app.FlutterActivity
import io.flutter.plugins.GeneratedPluginRegistrant
import io.flutter.plugin.common.MethodChannel
class MainActivity() : FlutterActivity() {
private val CHANNEL = "flutter.App.com.channel"
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
GeneratedPluginRegistrant.registerWith(this)
MethodChannel(flutterView, CHANNEL).setMethodCallHandler { call, result ->
}
}
}
This is known as a Draw Over Other apps.
This feature is not available in the iOS probably that's the reason flutter doesn't has this feature or official package for it.
But to achieve this feature in your application you can write up some PlatformChannels.
This permission allow you to draw on top of everything.
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
Allows an application to open windows using the type
TYPE_SYSTEM_ALERT, shown on top of all other applications.
Very few applications should use this permission; these windows are intended
for system-level interaction with the user.
Constant Value: "android.permission.SYSTEM_ALERT_WINDOW"
This code can also help you out to achieve this.
You can also check out springy-heads library by Flipkart-Incubator too.
Hello in this case you are searching for PlatformChannels You can review the documentation here: https://flutter.dev/docs/development/platform-integration/platform-channels or if you want i have a little post about this on my website: http://fjbatresv.com/flutter-tambien-habla-nativo/ (Select your language on the top of the post.)
Apart from restriction that it won't work on IOS, there is a plugin in flutter called System Alert Window, which does the same
It shows Truecaller like overlay window, over all other apps along with callback events
Related
I am working on SDK for android and later for ios. And this SDK should be added to the native android project as AAR and probably for ios as a pod.
I was following RN article integration with existing apps
and it is working completely fine but my problem is I don't want to run the whole activity up to the native project... I just need to open modal dialog with RN components and some logic
The third part of application write in Kotlin on android implementing my SDK
class MainActivity : AppCompatActivity() {
...
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val MySDK = MySdk(this, this, 'some other data')
...
btnOpenWalleePaymentModalReactNative.setOnClickListener {
MySDK.launchDialog()
}
and now my SDK opening RN activity (inside MySDK):
class MySDK(private val context: Context, val activity: Activity) {
fun launchDialog() {
val intent = Intent(context, MyReactActivity::class.java)
context.startActivity(intent)
}
and this part open standard activity where all RN exist but i don't want to have an activity i want to have dialogue
so I created a class with dialogue what I want to use for that (BottomSheetDialogFragment)
class TestDialog(context: Context, var activity: Activity): BottomSheetDialogFragment() {
private lateinit var reactRootView: ReactRootView
private lateinit var reactInstanceManager: ReactInstanceManager
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
SoLoader.init(context, false)
reactRootView = ReactRootView(context)
val packages: List<ReactPackage> = PackageList(activity.application).packages
reactInstanceManager = ReactInstanceManager.builder()
.setApplication(activity.application)
.setCurrentActivity(activity)
.setBundleAssetName("index.android.bundle")
.setJSMainModulePath("index")
.addPackages(packages)
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build()
reactRootView?.startReactApplication(reactInstanceManager, "PaymentSDK", null)
activity.setContentView(reactRootView)
}
and when I init this class and open dialogue with react native it will change the activity from third party library and put there my react activity and blurred overlay from dialogue...
TestDialog(context, activity ).show(activity.supportFragmentManager, "tag")
like on the picture
any idea how to squeeze RN view/UI into fragment or dialogue view or any other idea how to do it? Or an article with something similar like writing an RN module for native android?
I've developed a RN native module as a bridge for a native SDK once. I've followed this old tutorial page https://archive.reactnative.dev/docs/native-modules-android.
From what I've understood from your situation, you will have a RN application trying to call a showDialog function from this native module, passing the RN activity to make sure it is opened from it, right? The snippets that you've posted confused me a little bit but I'll try to help with what I remember.
You'll have to have a JS/RN project for this native module, you can follow this https://reactnative.dev/docs/native-modules-setup and the following articles from the official docs to create it.
First, in the Android part of this created project you will need to have the .aar downloaded through gradle or locally in the project.
The Android part will have two important files: MySdkPackage and MySdkModule
MySdkPackage will just list your module for React Native to see it, something like:
package com.reactnativemysdk
import java.util.Arrays
import java.util.Collections
import com.facebook.react.ReactPackage
import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.uimanager.ViewManager
import com.facebook.react.bridge.JavaScriptModule
class MySdkPackage : ReactPackage {
override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
return Arrays.asList<NativeModule>(MySdkModule(reactContext))
}
override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
return emptyList<ViewManager<*, *>>()
}
}
and MySdkModule will indeed make the connection with your Android native .aar implementation, having a reference from the React Native context and activity. Something like:
package com.reactnativemysdk
class MySdkModule(private var reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {
#ReactMethod
fun showMyDialog(promise: Promise) {
if (reactContext.hasCurrentActivity()) {
reactContext.currentActivity?.runOnUiThread {
MySdk.getInstance().showDialog(reactContext.currentActivity) //this activity and context are the references that
// you need to properly show the dialog as it was native
}
} else {
promise.reject(ERROR_STRING, "No activity found.")
}
}
}
this method annotated with #ReactMethod will need a JS counterpart, where things will be tied together and you will be able to call this JS 'bridge' code from your RN app JS code
the JS bridge will be something like this (the example I did was in TypeScript so I'm sorry):
import { Platform, NativeModules } from 'react-native';
type MySdkInterface = {
showMyDialog(): Promise<void>;
const { MySdk } = NativeModules;
export default MySdk as MySdkInterface;
Creating this native module and organizing things like this you will have a better integration between and RN and the native parts and you will be able to properly show the dialog and any rendering/layout issues would be solvable in your original Android SDK code
So you will have something like
RN App JS showDialog <-> RN Native Module JS showDialog <-> RN Native Module Android (or iOS) native code showDialog <-> MySdk (the .aar one) showDialog implementation
I'm pretty sure these links and references will be able to help you as well but I hope I was able to at least clarify the way for you
I'd recommend following the first link, the https://archive.reactnative.dev/docs/native-modules-android, and following and understanding this ToastModule structure, I think the most recent one doesn't help that much.
I'm building an application for web/Android with Vue+Capacitor. What's the correct way to manipulate the Android part?
For example, I'd like the screen to not turn off through idle. Apparently, the way to do this is to put
getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
in the MainActivity. But since the Android part gets built again all the time it doesn't really make sense to edit it directly (or maybe I'm mistaken here somehow?)
So how do I achieve something like this?
Edit for clarification:
This is the MainActivity:
import com.getcapacitor.BridgeActivity;
public class MainActivity extends BridgeActivity {}
As you can see it does absolutely nothing besides extending BridgeActivity
This is the (generated!) onCreate of BridgeActivity:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
bridgeBuilder.setInstanceState(savedInstanceState);
getApplication().setTheme(getResources().getIdentifier("AppTheme_NoActionBar", "style", getPackageName()));
setTheme(getResources().getIdentifier("AppTheme_NoActionBar", "style", getPackageName()));
setTheme(R.style.AppTheme_NoActionBar);
setContentView(R.layout.bridge_layout_main);
/* The initally mentioned line here works but gets overwritten*/
}
You can just use this community plugin: https://github.com/capacitor-community/keep-awake.
This way you don't have to change the native code.
import { KeepAwake } from '#capacitor-community/keep-awake';
const keepAwake = async () => {
await KeepAwake.keepAwake();
};
const allowSleep = async () => {
await KeepAwake.allowSleep();
};
Once you run npx cap add android, the native project gets created and it’s never modified by capacitor, so you can make any changes you want in the MainActivity.java file or any other files (except the ones that start with “automatically generated, do not edit” or similar messaging).
I'm trying to integrate Zoom SDK meetings in an Android app. I've struggled for a while now with using the custom meeting ui and learning how to use Zoom's video view called MobileRTCVideoView. Here's the interface I would like to create:
What I've tried:
Studied Zoom's sample apps on Github.
Studied Zoom's documentation for customized meeting ui.
Asked on the developer forum.
Read related threads on the developer forum.
However, I still don't understand how to implement it, and would very much appreciate some explanation as to how to use MobileRTCVideoView, and achieving the meeting ui illustrated on the image. The meetings should only hold up to two users at a time.
I initialize the Zoom SDK with API Key and Secret, and use email login. I enable the custom meeting ui with:
zoomSDK!!.meetingSettingsHelper.isCustomizedMeetingUIEnabled=true
I start an instant meeting with:
val meetingService=zoomSDK!!.meetingService
val opts=InstantMeetingOptions()
opts.no_driving_mode = true
opts.no_invite = false
opts.no_meeting_end_message = false
opts.no_titlebar = false
opts.no_bottom_toolbar = false
opts.no_dial_in_via_phone = true
opts.no_dial_out_to_phone = true
opts.no_disconnect_audio = true
meetingService.startInstantMeeting(this,opts)
I've tried to follow the sample apps by creating another activity for the custom meetings, but apparently the class and the code is not complete:
class CustomMeetingActivity: FragmentActivity() {
private var zoomSDK:ZoomSDK?=null
private var inflater:LayoutInflater?=null
private var normal_view:View?=null
private var video_view:MobileRTCVideoView?=null
private var video_manager:MobileRTCVideoViewManager?=null
private var meeting_service:MeetingService?=null
private var in_meeting_service:InMeetingService?=null
private var share_view:MobileRTCShareView?=null
private var meeting_video_view:FrameLayout?=null
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
zoomSDK=ZoomSDK.getInstance()
meeting_service = ZoomSDK.getInstance().meetingService
in_meeting_service=ZoomSDK.getInstance().inMeetingService
if(meeting_service==null || in_meeting_service==null){finish();return}
setContentView(R.layout.custom_meeting_layout)
inflater=layoutInflater;
normal_view = inflater!!.inflate(R.layout.meeting_content_normal,null)
meeting_video_view = findViewById<View>(R.id.meetingVideoView) as FrameLayout
share_view = findViewById<View>(R.id.sharingView) as MobileRTCShareView
video_view=normal_view!!.findViewById(R.id.videoView) as MobileRTCVideoView
}
}
Added the activity in the manifest:
<activity
android:name="com.mypackage.appname.CustomMeetingActivity"
android:configChanges="orientation|keyboardHidden|screenSize"
android:theme="#style/ZMTheme.SubWindow">
</activity>
Solid advice I can give is:
Override or reuse their existing Sample to get started. (Though their sample app looks like it was done in a rush)
Don't user their styles, override their styles and use them.
Scan/Study the MyMeetingActivity. Most of the heavy lifting is done in it already.
Check both of their samples. If you cannot figure out sharedView from MyMeetingActivity, then it looks like you haven't studied hard enough
I have worked a lot on this over the last few weeks. Customized UI is working well. I am looking to make the Gallery view. We have loads of features and functionality that we added and reused. Over all it was a bumpy ride, but still went smooth as I spent time on it.
I don't understand why this question is not yet answered. Unfortunately I am too busy to actually write code out for you, especially since I am not even developing in Kotlin. Sorry. Hope you figure it. If I implement the gallery view, then maybe I can come back and give you some pointers. Good Luck
I started to build an app in Android Studio using Flutter (Dart). I
want to insert into the app a summary of the two books, so one it will have
35 routes (or pages) and the other another 35 routes (or pages).
At this moment my app looks like this: I have a Intro_Page with a
button that routes to the Main_Page. From the Main_Page there are
two buttons: one for BookA, the other for BookB. After entering the BookA the user, after the text, will find another
button to the next page, BookA_1 and on this page another button
to BookA_2 etc.
My question are:
Is there any way to use a template that can be reused for each page?
I have to put all the code into the main.dart file or I can make a dart file for each page and navigate between them with
buttons?
Is there any possible way to create a self-made template that it uses the design layout in all the pages so I don't have to rewrite the code for
one of each? Just the layout not the content (the text).
Is there any other better way to do this?
PS: Any other suggestion will be helpful.
Thank you very much if you answer this question!
You can create one generic class for routing, in that you can just reduce the navigation code.
You can create one class like this
import 'package:flutter/material.dart';
class MyNavigator {
static navigate({BuildContext context, Widget page}) async {
await Navigator.of(context).push(
MaterialPageRoute(builder: (_) {
return page;
}),
);
}
}
And use it as
MyNavigator.navigate(context: context, page: BookA());
I hope it will help you.
------------------------------------ UPDATE ---------------------------------
Also you can use extension methods as well.
For this to work, you'll need Dart 2.7 minimum!
Implementation for extension method is as follows
import 'package:flutter/material.dart';
extension NavigatorHelper on Widget {
goHere(BuildContext context) async {
await Navigator.of(context).push(
MaterialPageRoute(builder: (_) => this),
);
}
}
And you can use it as
BookA().goHere(context);
In my opinion extension method is good way.
You can use both.
We're currently working on an app for one of our customers, and we've decided to use React Native as the technology to use for creating the app.
I'm pretty new to this technology, and I'm used to developing apps with either C# or Java, where I have full-fledged IDEs that provide all the functionality I need.
I'm currently creating a login screen, and would like to change to different views, depending on the type of login (e.g.: Facebook, Google, Twitter, Email, etc.).
How do I go about doing this. As I mention, with an IDE, it'd be a shortcut like SHIFT+ALT+A or something to create a new item, select type, name it and the IDE does the rest.
Do I have to create a new xx.android/ios.js file, and somehow call that, or do I need to go in to the native backend of the different projects?
What I tried was something along the lines of:
class Class extends Component {
render() {
<UI code here>
<Button onPress={this.eventHandler}
}
eventHandler(event) {
var xxLogin = new xxLogin();
xxLogin.render();
}
}
class xxLogin extends Component {
render() {
<UI code here>
}
}
But that failed, which I expected.
Thanks in advance for any help!
P.S.: I'm using Mac OS X El Capitan, if that helps.