DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Flutter:Create Custom Quick Tile (Android Only).
Md. Mobin
Md. Mobin

Posted on • Updated on

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.

meme1

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.

Image 1

Meme2

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

Enter fullscreen mode Exit fullscreen mode

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.

Outpu1

  • 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

final output

Follow me:

Top comments (2)

Collapse
 
j_joaco profile image
Joaco

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

Collapse
 
djsmk123 profile image
Md. Mobin

Oh my mistake.

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.

One does not simply learn git