Flutter 中的浮动操作按钮

Question

I was trying to create the Floating Action button but I am missing icon.

My code is:

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue,
          centerTitle: true,
          title: Text(
            "Lessons of Flutter",
            style: TextStyle(
              color: Colors.white,
            ),
          ),
        ),
        body: Center(
            child: const Text('Press the button below!')
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // Add your onPressed code here!
          },
          child: Icon(Icons.mouse),
          backgroundColor: Colors.green,
        ),
      ),
    );
  }
}

it is a screen from the virtual device.( You can see icon looks weird.)

Answer 1

To use this class, make sure you set uses-material-design: true in your project's pubspec.yaml file in the flutter section. This ensures that the MaterialIcons font is included in your application. This font is used to display the icons. For example:

Refer this link: https://api.flutter.dev/flutter/material/Icons-class.html

Answer 2

The Icon is not rendering because of the missing font from the material design library. You have to enable the material design library in your pubspec.yml file as given below,

flutter:
  uses-material-design: true

Just make uses-material-design to true and the error will be gone. This ensures that the MaterialIcons font is included in your application. This font is used to display the icons Here is the official docs of Icon class