Flutter开发中如何在页面底部按钮区域添加SVG图片

1. 确认资源与依赖配置 #

首先检查项目的pubspec.yaml文件，确保依赖和资源配置正确：

# 依赖部分添加flutter_svg
dependencies:
  flutter:
    sdk: flutter
  flutter_svg: ^2.0.7 # 替换为当前最新版本号

# 资源声明部分添加所有用到的SVG文件路径
flutter:
  assets:
    - assets/illustration.svg
    - assets/home.svg # 按你实际的底部图标文件名替换
    - assets/history.svg
    - assets/settings.svg

配置完成后执行flutter pub get生效。

2. 修改页面代码添加底部SVG按钮区域 #

你只需要在原有Scaffold组件中新增bottomNavigationBar属性，用来承载底部带SVG的按钮区域即可，原有页面内容不需要修改，修改后的完整代码如下：

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'URL Shortener',
      theme: ThemeData(
        primarySwatch: Colors.purple,
      ),
      home: const StartPage(),
    );
  }
}

// 如果需要实现底部按钮点击切换选中效果，改成StatefulWidget即可
class StartPage extends StatelessWidget {
  const StartPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.grey[300],
        body: Center(
          child: ListView(
            children: [
              Center(
                child: Text(
                  "Shortly",
                  style: TextStyle(
                      fontSize: 40,
                      height: 2.0,
                      color: Color.fromRGBO(53, 50, 62, 10),
                      fontWeight: FontWeight.bold),
                ),
              ),
              SvgPicture.asset(
                'assets/illustration.svg',
              ),
              Center(
                child: Text(
                  "Let's get started!",
                  style: TextStyle(
                      fontSize: 20,
                      color: Color.fromRGBO(53, 50, 62, 10),
                      fontWeight: FontWeight.bold),
                ),
              ),
              Center(
                child: SizedBox(
                  width: 200,
                  height: 60,
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                        "Paste your first link into the field to shorten it",
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            fontSize: 15,
                            color: Color.fromRGBO(76, 74, 85, 10),
                            fontWeight: FontWeight.bold)),
                  ),
                ),
              ),
              Center(
                child: SizedBox(
                  width: 300,
                  height: 40,
                  child: TextField(
                    textAlign: TextAlign.center,
                    decoration: InputDecoration(
                        contentPadding: EdgeInsets.all(10.0),
                        border: OutlineInputBorder(
                          borderRadius: const BorderRadius.all(
                            Radius.circular(10.0),
                          ),
                          borderSide: const BorderSide(
                            width: 0,
                            style: BorderStyle.none,
                          ),
                        ),
                        fillColor: Colors.white,
                        filled: true,
                        hintText: 'Shorten a link here ...'),
                  ),
                ),
              ),
              Center(
                child: SizedBox(
                  width: 300,
                  child: ElevatedButton(
                    onPressed: () {
                      print("Button Click");
                    },
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.blue,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10.0)),
                      minimumSize: const Size(60, 40),
                    ),
                    child: const Text('SHORTEN IT!'),
                  ),
                ),
              )
            ],
          ),
        ),
        // 新增底部SVG按钮区域
        bottomNavigationBar: Container(
          color: Colors.white,
          padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 24),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  SvgPicture.asset(
                    'assets/home.svg', // 替换为你的首页SVG图标路径
                    height: 24,
                    width: 24,
                    colorFilter: const ColorFilter.mode(Colors.blue, BlendMode.srcIn),
                  ),
                  const SizedBox(height: 4),
                  const Text('首页', style: TextStyle(color: Colors.blue, fontSize: 12)),
                ],
              ),
              Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  SvgPicture.asset(
                    'assets/history.svg', // 替换为你的历史记录SVG图标路径
                    height: 24,
                    width: 24,
                    colorFilter: const ColorFilter.mode(Colors.grey, BlendMode.srcIn),
                  ),
                  const SizedBox(height: 4),
                  const Text('历史', style: TextStyle(color: Colors.grey, fontSize: 12)),
                ],
              ),
              Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  SvgPicture.asset(
                    'assets/settings.svg', // 替换为你的设置SVG图标路径
                    height: 24,
                    width: 24,
                    colorFilter: const ColorFilter.mode(Colors.grey, BlendMode.srcIn),
                  ),
                  const SizedBox(height: 4),
                  const Text('设置', style: TextStyle(color: Colors.grey, fontSize: 12)),
                ],
              )
            ],
          ),
        ));
  }
}

3. 补充说明 #

• 如果你需要实现点击底部按钮切换选中状态，只需将StartPage改为StatefulWidget，定义一个selectedIndex变量存储当前选中的索引，点击按钮时更新该变量，再根据索引动态修改SVG和文字的颜色即可。
• 如果不需要修改SVG的原生颜色，删除colorFilter参数即可。
• 所有SVG文件的存放路径、文件名必须和代码中填写的完全一致，否则会出现资源加载失败的问题。

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