Flutter:Create Custom Quick Tile (Android Only).

Tile

A Tile holds the state of a tile that will be displayed in Quick Settings. A tile in Quick Settings exists as an icon with an accompanied label. It also may have content description for accessibility usability. The style and layout of the tile may change to match a given device.

Why Do We need Quick Setting Tile ?

• To add custom Tiles in the Quick Settings menu in addition to the existing ones such as WiFi, Bluetooth, Airplane Mode, etc.

• Custom Tiles help user to avoid open app for changing specific setting of the app,user just press tile its should work accordingly whats specified.

Lets Go and Try in Flutter :

• Create new flutter project.

• Now open "AndroidManifest.xml" and click on "Open for editing in Android Studio" and wait Until gradle completes.

• Add following lines of Accessing Tile Service in "AndroidManifest.xml" file.

<service
           android:name=".MyTileService"
           android:icon="@drawable/flutter"
           android:label="Flutter App Tile"
           android:permission="android.permission.BIND_QUICK_SETTINGS_TILE"
           android:exported="true">

           <intent-filter>
               <action android:name="android.service.quicksettings.action.QS_TILE"/>
           </intent-filter>
       </service>

Note add you icon in @drawble and check out instruction here.

• Now create a new Kotlin file named TileService in app package and following content :

	class MyTileService: TileService() {
	override fun onClick() {
	super.onClick()
	// Called when the user click the tile
	}
	override fun onTileRemoved() {
	super.onTileRemoved()
	// Do something when the user removes the Tile
	}
	override fun onTileAdded() {
	super.onTileAdded()
	// Do something when the user add the Tile
	}
	override fun onStartListening() {
	super.onStartListening()
	// Called when the Tile becomes visible
	}
	override fun onStopListening() {
	super.onStopListening()
	// Called when the tile is no longer visible
	}
	}

view raw TileService.kt hosted with ❤ by GitHub

TileService has following methods :

OnTileAdded: When the user adds the Tile in the Quick Settings

OnTileRemoved: When the user removes the Tile from the Quick Settings

OnTileClick: When the user clicks the Tile

OnStartListening: When the Tile becomes visible (this happens when you have already added the tile and you open the Quick Settings)

OnStopListening: When the Tile is no longer visible (when you close the Quick Settings)

We are going to work in OnTileClick() Function.

• OnClick Handler: On click tile, for example we are going to launch calendar app to see,it's working or not.
  

  	override fun onClick() {
  	super.onClick()
  	val calendarIntent = Intent(Intent.ACTION_EDIT)
  	calendarIntent.type = "vnd.android.cursor.item/event"
  	calenderIntent.flags=Intent.FLAG_ACTIVITY_NEW_TASK
  	startActivityAndCollapse(calendarIntent)
  	}

  view raw TileService.kt hosted with ❤ by GitHub

• Now run the app and Lets see output.

• Now we are going to Launch the app by pressing tile and send message from Native (Kotlin) code to Flutter.

Read here more for Launching Flutter Activity

• For Launching Flutter Activity, we need to specify flutter activity in AndroidManifest.xml file.

	<activity
	android:name="io.flutter.embedding.android.FlutterActivity"
	android:theme="@style/LaunchTheme"
	android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
	android:hardwareAccelerated="true"
	android:windowSoftInputMode="adjustResize"
	tools:ignore="Instantiatable" />

view raw AndroidManifest.xml hosted with ❤ by GitHub

• Lets Launch Flutter Activity and send Arguments in Flutter Code.

	override fun onClick() {
	super.onClick()
	try{
	val newIntent=FlutterActivity.withNewEngine().dartEntrypointArgs(listOf("launchFromQuickTile")).build(this)
	newIntent.flags=Intent.FLAG_ACTIVITY_NEW_TASK
	startActivityAndCollapse(newIntent)
	}
	catch (e:Exception){
	Log.d("debug","Exception ${e.toString()}")
	}
	}

view raw TileService.kt hosted with ❤ by GitHub

• Listen quick tile On Click in Flutter Code:

	import 'package:flutter/material.dart';
	Future<void> main(List<String> arguments) async {
	WidgetsFlutterBinding.ensureInitialized();
	//you can write your own logic like we routes should user navigate
	// Here I am writing my logic if the app launched
	// from quick setting then I am showing message that
	// I am receiving from Native(Kotlin) Code.
	runApp(MyApp(msg: arguments.isNotEmpty?arguments[0]:null));
	}
	class MyApp extends StatelessWidget {
	const MyApp({super.key, this.msg});
	final String? msg;
	@override
	Widget build(BuildContext context) {
	return MaterialApp(
	title: 'Quick Tile',
	theme: ThemeData(
	primarySwatch: Colors.blue,
	),
	home:Scaffold(
	appBar: AppBar(title: const Text("Quick Tile ")),
	body: Center(
	child: Text(msg??"Not Launched from Quick Tile"),
	),
	)
	);
	}
	}

view raw main.dart hosted with ❤ by GitHub

if App run by user manually, we will be receiving empty list of arguments and when user open app from quick tile,then will receive list of strings.

Lets See Output

• Source Code

Follow me:

• GitHub

• LinkedIn

• Twitter

Comments

[Joaco]

Thanks! But there's a typo in the title: It should be tile and not title.

[Md. Mobin]

Oh my mistake.