将素材图片用作标签图标在颤动中

Question

我想从我的TabBar内的资产中加载图像。我的资产文件夹中有活动和非活动图像。图像渲染不好，但我没有任何错误。

它们只是显示为矩形暗图像。我在做什么错？

class Choice {
  final String title;
  final Image icon;
  const Choice({this.title, this.icon});
}
 List<Choice> choices = <Choice>[
    Choice(title: 'Featured', icon:  new Image.asset('assets/images/find_active.png'),),
  Choice(title: 'Conversation',icon:  new Image.asset('assets/images/resource_active.png'),),
  Choice(title: 'Schedule',icon:  new Image.asset('assets/images/resource_active.png'),),];
class ChoicePage extends StatelessWidget {
  const ChoicePage({Key key, this.choice}) : super(key: key);
  final Choice choice;

  @override
  Widget build(BuildContext context) {
    final TextStyle textStyle = Theme.of(context).textTheme.display1;
    return Card(
      color: Colors.white,
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Image(
              height: 28,
              width: 28,
              image: choice.icon.image,
            ),
            Text(
              choice.title,
              style: textStyle,
            ),
          ],
        ),
      ),
    );
  }
}

Main.dart

TabBar(
                      isScrollable: true,
                      tabs: choices.map<Widget>((Choice choice) {
                        return Tab(
                          text: choice.title,
                          icon: ImageIcon(choice.icon.image),
                        );
                      }).toList(),
                      labelColor: Color(0xFF1C2447),
                    )

Answer 1

您不应该为所描述的用例使用ImageIcon，可以使用Image.asset提供程序使图像显示在选项卡中。

例如：

new Tab(icon: new Image.asset(choice.icon.image), text: choice.title),

这是实际的完整示例：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class Choice {
  final String title;
  final String image;

  Choice(this.title, this.image);
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<Choice> tabs = [
      Choice('Active', 'images/active.png'),
      Choice('Inactive', 'images/inactive.png'),
    ];

    return MaterialApp(
      home: DefaultTabController(
        length: tabs.length,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: tabs
                  .map((Choice tab) => Tab(
                        text: tab.title,
                        icon: Image.asset(tab.image),
                      ))
                  .toList(),
            ),
          ),
        ),
      ),
    );
  }
}