App signing in Flutter - Mini App: Build & Ship

Build: App Signing Info

This screen shows the app signing information and allows the user to copy the signing key details.

Target UI

┌───────────────────────────────┐
│       App Signing Info         │
├───────────────────────────────┤
│ Keystore Path:                │
│ /user/keys/myapp.keystore     │
│                               │
│ Key Alias: myappkey           │
│                               │
│ SHA-1 Fingerprint:            │
│ AB:CD:EF:12:34:56:78:90:AB:CD│
│                               │
│ [ Copy Signing Info ]         │
└───────────────────────────────┘

Display keystore path, key alias, and SHA-1 fingerprint as text fields.

Add a button labeled 'Copy Signing Info' that copies all signing info to clipboard.

Use a Scaffold with AppBar titled 'App Signing Info'.

Show a SnackBar confirming copy action.

Ensure text is selectable for accessibility.

Starter Code

Flutter

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class AppSigningInfoScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('App Signing Info'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // TODO: Add keystore path text
            // TODO: Add key alias text
            // TODO: Add SHA-1 fingerprint text
            // TODO: Add Copy Signing Info button
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Solution

Flutter

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class AppSigningInfoScreen extends StatelessWidget {
  final String keystorePath = '/user/keys/myapp.keystore';
  final String keyAlias = 'myappkey';
  final String sha1Fingerprint = 'AB:CD:EF:12:34:56:78:90:AB:CD';

  void copySigningInfo(BuildContext context) {
    final info = 'Keystore Path: $keystorePath\nKey Alias: $keyAlias\nSHA-1 Fingerprint: $sha1Fingerprint';
    Clipboard.setData(ClipboardData(text: info));
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('Signing info copied to clipboard')),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('App Signing Info'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('Keystore Path:', style: TextStyle(fontWeight: FontWeight.bold)),
            SelectableText(keystorePath),
            SizedBox(height: 16),
            Text('Key Alias:', style: TextStyle(fontWeight: FontWeight.bold)),
            SelectableText(keyAlias),
            SizedBox(height: 16),
            Text('SHA-1 Fingerprint:', style: TextStyle(fontWeight: FontWeight.bold)),
            SelectableText(sha1Fingerprint),
            SizedBox(height: 32),
            Center(
              child: ElevatedButton(
                onPressed: () => copySigningInfo(context),
                child: Text('Copy Signing Info'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

This screen uses a Scaffold with an AppBar titled 'App Signing Info'. The body shows three labeled pieces of signing information using SelectableText so users can select and copy text if they want. A button labeled 'Copy Signing Info' copies all the signing details to the clipboard when pressed. A SnackBar confirms the copy action to the user. Padding and spacing keep the layout clean and readable. This simple UI helps users view and copy app signing details easily.

Final Result

Completed Screen

┌───────────────────────────────┐
│       App Signing Info         │
├───────────────────────────────┤
│ Keystore Path:                │
│ /user/keys/myapp.keystore     │
│                               │
│ Key Alias:                   │
│ myappkey                     │
│                               │
│ SHA-1 Fingerprint:           │
│ AB:CD:EF:12:34:56:78:90:AB:CD│
│                               │
│       [ Copy Signing Info ]    │
└───────────────────────────────┘

User can select and copy any text manually.

Tapping 'Copy Signing Info' copies all info to clipboard.

SnackBar appears at bottom confirming copy.

Stretch Goal

Add a toggle switch in the AppBar to switch between light and dark mode for this screen.

💡 Hint

Use a StatefulWidget and ThemeMode to toggle theme. Wrap MaterialApp with theme and darkTheme.