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 :

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.
  

• 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.

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

• Listen quick tile On Click in Flutter Code:

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.