求助：点击按钮提取TextField内容并拆分字母展示Firebase对应图片

1. 依赖配置 #

确保pubspec.yaml中添加必要依赖：

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.15.0
  firebase_storage: ^11.2.0

执行flutter pub get完成安装。

2. 核心实现代码 #

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_storage/firebase_storage.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const LetterImagePage(),
    );
  }
}

class LetterImagePage extends StatefulWidget {
  const LetterImagePage({super.key});

  @override
  State<LetterImagePage> createState() => _LetterImagePageState();
}

class _LetterImagePageState extends State<LetterImagePage> {
  final TextEditingController _nameController = TextEditingController();
  List<String> _imageUrls = [];
  bool _isLoading = false;

  // 从Firebase Storage获取单张字母图片的下载链接
  Future<String?> _getLetterImageUrl(String letter) async {
    try {
      final ref = FirebaseStorage.instance.ref().child('images/${letter.toLowerCase()}.png');
      return await ref.getDownloadURL();
    } catch (e) {
      print('获取图片失败: $e');
      return null;
    }
  }

  // 按钮点击逻辑处理
  void _handleButtonTap() async {
    setState(() {
      _isLoading = true;
      _imageUrls.clear();
    });

    final inputText = _nameController.text.trim();
    if (inputText.isEmpty) {
      setState(() => _isLoading = false);
      return;
    }

    // 拆分输入文本为单个字符
    final letters = inputText.split('');
    List<String> urls = [];

    // 批量获取每个字符对应的图片链接
    for (var letter in letters) {
      final url = await _getLetterImageUrl(letter);
      if (url != null) urls.add(url);
    }

    setState(() {
      _imageUrls = urls;
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('字母图片展示')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _nameController,
              decoration: const InputDecoration(
                hintText: '输入名称',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: _isLoading ? null : _handleButtonTap,
              child: _isLoading
                  ? const CircularProgressIndicator(color: Colors.white)
                  : const Text('展示图片'),
            ),
            const SizedBox(height: 24),
            Expanded(
              child: _imageUrls.isEmpty
                  ? const Center(child: Text('点击按钮开始展示'))
                  : PageView.builder(
                      itemCount: _imageUrls.length,
                      itemBuilder: (context, index) {
                        return Center(
                          child: Image.network(
                            _imageUrls[index],
                            errorBuilder: (context, error, stackTrace) {
                              return Text('无法加载图片: ${_nameController.text[index]}');
                            },
                          ),
                        );
                      },
                    ),
            ),
          ],
        ),
      ),
    );
  }
}

3. Custom Action失败的常见排查点 #

• 图片路径匹配：确保Firebase Storage内的图片命名与代码一致（比如统一用小写字母命名），images/路径要和存储桶内的文件夹对应。
• Storage权限配置：测试阶段可临时开放读取权限（上线后需修改为安全规则）：

  rules_version = '2';
  service firebase.storage {
    match /b/{bucket}/o {
      match /{allPaths=**} {
        allow read: if true;
        allow write: if false;
      }
    }
  }
  

• 异步逻辑处理：Custom Action若未处理异步，会导致还未获取到图片URL就渲染PageView，必须等待所有URL请求完成后再更新页面状态。
• 字符过滤：提前过滤输入中的非字母字符，避免请求不存在的图片资源。

内容的提问来源于stack exchange，提问作者Cristiano Saraiva