英文:
how to use svg file in bottom nav bar in flutter?
问题
- 将外部图标放入底部导航栏的正确方法是否只能使用SVG文件？
- 如果通过搜索理解类似问题1，那么我尝试了下面的代码，但只显示了文本标签，没有显示图标。如何解决？
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.transparent,
leading: Icon(Icons.arrow_back_outlined),
title: Text('MY ID Balance $298.98'),
actions: [Icon(Icons.menu)],
),
extendBodyBehindAppBar: true,
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage('assets/image/auth_background.png')
)
),
),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: SvgPicture.asset('assets/icons/bottomnav/menu.svg', width: 25, color: Colors.black),
label: 'menu'
),
BottomNavigationBarItem(
icon: SvgPicture.asset('assets/icons/bottomnav/pfp.svg', color: Colors.black54, width: 30),
label: 'pfp',
),
],
)
);
}
}
英文:
- Is it right the way to put external icon in bottomnavigationbar is only by svg file?
- if understand like question 1 through googling, so I tried like below code but it appers just label from text, no apper icon. How can I resolve it?
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.transparent,
leading: Icon(Icons.arrow_back_outlined),
title: Text ('MY ID Balance \$298.98'),
actions: [Icon(Icons.menu)],
),
extendBodyBehindAppBar: true,
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage('assets/image/auth_background.png')
)
),
),
bottomNavigationBar:
BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: SvgPicture.asset('assets/icons/bottomnav/menu.svg', width: 25, color: Colors.black,),
label: 'menu'
),
BottomNavigationBarItem(
icon: SvgPicture.asset('assets/icons/bottomnav/pfp.svg', color: Colors.black54, width: 30),
label: 'pfp',
),
],
)
);
}
}
答案1
得分: 1
不是所有的SVG都受到此软件包的支持。
您的SVG可能不受支持。通过运行以下代码片段进行验证，
final SvgParser parser = SvgParser();
try {
parser.parse('assets/icons/bottomnav/menu.svg', warningsAsErrors: true);
print('SVG is supported');
} catch (e) {
print('SVG contains unsupported features');
}
英文:
Not all SVGs are supported by this package.
Your SVG is probably not supported. Verify by running this snippet,
final SvgParser parser = SvgParser();
try {
parser.parse('assets/icons/bottomnav/menu.svg', warningsAsErrors: true);
print('SVG is supported');
} catch (e) {
print('SVG contains unsupported features');
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论