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.

Practice

1. What is the main purpose of app signing in Flutter app development?

easy

A. To add animations to the app

B. To increase app size

C. To prove the app is authentic and safe

D. To change app colors

Solution

1. Step 1: Understand app signing purpose

   App signing ensures the app is verified and trusted by users and stores.

2. Step 2: Identify correct purpose

   Among the options, only proving authenticity and safety matches app signing's goal.

3. Final Answer:

   To prove the app is authentic and safe -> Option C

4. Quick Check:

   App signing = authenticity and safety [OK]

Hint: App signing means proving app trust, not UI changes [OK]

Common Mistakes:

• Confusing signing with UI or performance changes
• Thinking signing increases app size
• Believing signing adds animations

2. Which file is typically used to store the signing key information for Android apps in Flutter?

easy

A. build.gradle

B. pubspec.yaml

C. main.dart

D. key.properties

Solution

1. Step 1: Identify signing key storage

   The signing key info is usually stored in a separate properties file named key.properties.

2. Step 2: Differentiate other files

   pubspec.yaml manages dependencies, main.dart is app code, build.gradle configures build but not key storage.

3. Final Answer:

   key.properties -> Option D

4. Quick Check:

   Signing keys stored in key.properties [OK]

Hint: Signing keys go in key.properties, not code files [OK]

Common Mistakes:

• Confusing pubspec.yaml with signing config
• Thinking main.dart holds signing info
• Assuming build.gradle stores keys directly

3. Given this snippet in android/app/build.gradle:

signingConfigs {
    release {
        keyAlias keystoreProperties['keyAlias']
        keyPassword keystoreProperties['keyPassword']
        storeFile file(keystoreProperties['storeFile'])
        storePassword keystoreProperties['storePassword']
    }
}

What happens if the keystoreProperties file is missing?

medium

A. Build fails with an error about missing keystore properties

B. App builds but is unsigned

C. App builds and signs with default debug key

D. Build succeeds but app crashes on launch

Solution

1. Step 1: Understand build.gradle signing config

   The build.gradle reads keystoreProperties for signing keys during build.

2. Step 2: Effect of missing keystoreProperties

   If the file is missing, the build cannot find signing info and fails with an error.

3. Final Answer:

   Build fails with an error about missing keystore properties -> Option A

4. Quick Check:

   Missing keystoreProperties = build error [OK]

Hint: Missing keystoreProperties causes build failure [OK]

Common Mistakes:

• Assuming app builds unsigned without error
• Thinking default debug key is used for release
• Believing app crashes instead of build failing

4. You tried to build a signed APK but got this error: "Keystore file not found." What is the most likely cause?

medium

A. The app code has syntax errors

B. The path to the keystore file in build.gradle is incorrect

C. The Flutter SDK is outdated

D. The device is not connected

Solution

1. Step 1: Analyze error message

   "Keystore file not found" means the build system cannot locate the keystore file.

2. Step 2: Identify common causes

   Incorrect path in build.gradle or key.properties is the usual cause, not SDK or device issues.

3. Final Answer:

   The path to the keystore file in build.gradle is incorrect -> Option B

4. Quick Check:

   Keystore file error = wrong path [OK]

Hint: Check keystore file path if build says file not found [OK]

Common Mistakes:

• Blaming Flutter SDK version
• Thinking app code errors cause keystore issues
• Assuming device connection affects signing

5. You want to publish your Flutter app on Google Play. Which steps correctly describe the app signing process before publishing?

hard

A. Generate a keystore, configure build.gradle with signing info, build a release APK or AAB

B. Write signing code inside main.dart, then build debug APK

C. Upload unsigned APK directly to Google Play

D. Use Flutter run command to sign and publish automatically

Solution

1. Step 1: Understand signing steps for publishing

   You must create a keystore, configure signing in build.gradle, then build a release version.

2. Step 2: Eliminate incorrect options

   Signing is not done in app code, unsigned APKs are rejected, and Flutter run does not publish.

3. Final Answer:

   Generate a keystore, configure build.gradle with signing info, build a release APK or AAB -> Option A

4. Quick Check:

   Signing before publishing = generate keystore + configure + build release [OK]

Hint: Sign with keystore and build release before publishing [OK]

Common Mistakes:

• Trying to sign inside app code
• Uploading unsigned APK
• Expecting Flutter run to publish app