Flutter如何读取asset下的文本文件并显示到Container组件

• 异步加载方法_loadData从未被调用，存储文本的变量_data始终为null，导致Text组件无内容可显示
• 你使用的是无状态组件StatelessWidget，即便是手动调用了加载方法修改了_data的值，也无法触发UI重新渲染，页面不会更新
• 额外注意：pubspec.yaml对缩进规则非常严格，请确认你配置的assets节点的缩进是2个空格，和上方注释行保持同级，否则会识别不到资源

推荐使用FutureBuilder组件处理异步加载的资源渲染，这是Flutter处理异步内容的标准方案，无需手动管理状态更新：

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


class CsOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Read Text File';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: Text(appTitle),
        ),
        body: const LoadTextAsset()
      ),
    );
  }
} 

class LoadTextAsset extends StatelessWidget {
  // 异步加载文本的方法
  Future<String> _loadData() async {
    return await rootBundle.loadString('lib/asset/textfile/cs_one.txt');
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16),
      child: FutureBuilder<String>(
        future: _loadData(),
        builder: (context, snapshot) {
          // 加载完成显示文本
          if (snapshot.connectionState == ConnectionState.done) {
            return Text(snapshot.data ?? '加载的文本为空');
          }
          // 加载中显示loading提示
          return const CircularProgressIndicator();
        },
      ),
    );
  }
}

• Dart语法规范要求类名使用大驼峰命名，否则可能会触发语法警告
• 如果你坚持使用StatefulWidget实现，需要将组件改为Stateful类型，在initState生命周期中调用_loadData方法，加载完成后调用setState触发UI更新即可

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