我正在尝试在Flutter中使用底部导航栏。对Flutter非常陌生。在BottomNavigationBarItem中,我是否可以使用自定义的SVG图标而不是Flutter Material提供的图标?如果您能帮我提供代码片段,那将太棒了。
我正在开发此类型的导航栏。进入图片描述。我有这些自定义图标,但我不知道如何使用它们。
我正在尝试在Flutter中使用底部导航栏。对Flutter非常陌生。在BottomNavigationBarItem中,我是否可以使用自定义的SVG图标而不是Flutter Material提供的图标?如果您能帮我提供代码片段,那将太棒了。
我正在开发此类型的导航栏。进入图片描述。我有这些自定义图标,但我不知道如何使用它们。
使用一个包来使用SVG,指令在这里:https://pub.dev/packages/flutter_svg#-installing-tab-
然后在底部导航栏的图标参数中包含SVG文件。
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: SvgPicture.asset(/*path to the svg file*/),
title: Text("Browse")
),
]
Container
进行包装,以提供width
和height
代码片段
BottomNavigationBarItem(
icon: Container(
width: 30,
height: 30,
child: SvgPicture.asset(
"assets/wikimedia/Ghostscript_Tiger.svg",
),
),
title: Text('Home'),
)
完整代码
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
void main() => runApp(MyApp());
/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: MyStatefulWidget(),
);
}
}
class MyStatefulWidget extends StatefulWidget {
MyStatefulWidget({Key key}) : super(key: key);
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: Home',
style: optionStyle,
),
Text(
'Index 1: Business',
style: optionStyle,
),
Text(
'Index 2: School',
style: optionStyle,
),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Container(
width: 30,
height: 30,
child: SvgPicture.asset(
"assets/wikimedia/Ghostscript_Tiger.svg",
),
),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
title: Text('Business'),
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
title: Text('School'),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}