Flutter Lyric Custom Widget Configuration

Custom Code

I am trying to add a custom widget to my app but I am a beginner to Flutter, and the widget is this: flutter_lyric (https://pub.dev/packages/flutter_lyric). I am having the following error after compiling the code:

Target of URI doesn't exist: 'const.dart'. Try creating the file referenced by the URI, or try using a URI for a file that does exist.

Undefined name 'normalLyric'. Try correcting the name to one that is defined, or defining the name.

Undefined name 'transLyric'. Try correcting the name to one that is defined, or defining the name.

This is the code for the custom widget below

// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'dart:ui';
import 'package:audioplayers/audioplayers.dart';
import 'package:flutter_lyric/lyrics_reader.dart';
import 'const.dart';

class FlutterLyric extends StatefulWidget {
  const FlutterLyric({
    super.key,
    this.width,
    this.height,
  });

  final double? width;
  final double? height;

  @override
  State<FlutterLyric> createState() => _FlutterLyricState();
}

class _FlutterLyricState extends State<FlutterLyric> {
  AudioPlayer? audioPlayer; // Audio player object
  double sliderProgress = 111658; // Current progress of the slider
  int playProgress = 111658; // Current progress of the player
  double max_value = 211658; // Maximum value of the slider
  bool isTap = false; // Variable to track if the slider is being tapped

  bool useEnhancedLrc = false; // Variable to control enhanced lyric usage
  // Creating a lyrics model with default and translated lyrics
  var lyricModel = LyricsModelBuilder.create()
      .bindLyricToMain(normalLyric)
      .bindLyricToExt(transLyric)
      .getModel();

  var lyricUI = UINetease(); // Lyric user interface object

  @override
  void initState() {
    super.initState(); // Calling super class's initState method
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Plugin example app'), // App bar title
      ),
      body: buildContainer(), // Building container for the widget body
    );
  }

  // Building main container
  Widget buildContainer() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        buildReaderWidget(), // Building lyric reader widget
        Expanded(
          child: SingleChildScrollView(
            child: Column(
              children: [
                ...buildPlayControl(), // Building play control UI
                ...buildUIControl(), // Building UI control settings
              ],
            ),
          ),
        ),
      ],
    );
  }

  var lyricPadding = 40.0; // Padding around the lyric reader widget

  // Building the lyric reader widget
  Stack buildReaderWidget() {
    return Stack(
      children: [
        ...buildReaderBackground(), // Building background for the lyric reader
        LyricsReader(
          padding: EdgeInsets.symmetric(horizontal: lyricPadding),
          model: lyricModel,
          position: playProgress,
          lyricUi: lyricUI,
          playing: playing,
          size: Size(double.infinity, MediaQuery.of(context).size.height / 2),
          emptyBuilder: () => Center(
            child: Text(
              "No lyrics",
              style: lyricUI.getOtherMainTextStyle(),
            ),
          ),
          // Building UI for selecting a lyric line
          selectLineBuilder: (progress, confirm) {
            return Row(
              children: [
                IconButton(
                    onPressed: () {
                      LyricsLog.logD("点击事件");
                      confirm.call();
                      setState(() {
                        audioPlayer?.seek(Duration(milliseconds: progress));
                      });
                    },
                    icon: Icon(Icons.play_arrow, color: Colors.green)),
                Expanded(
                  child: Container(
                    decoration: BoxDecoration(color: Colors.green),
                    height: 1,
                    width: double.infinity,
                  ),
                ),
                Text(
                  progress.toString(),
                  style: TextStyle(color: Colors.green),
                )
              ],
            );
          },
        )
      ],
    );
  }

  // Building UI for play control
  List<Widget> buildPlayControl() {
    return [
      Container(
        height: 20,
      ),
      Text(
        "Progress:$sliderProgress",
        style: TextStyle(
          fontSize: 16,
          color: Colors.green,
        ),
      ),
      // Slider for controlling play progress
      if (sliderProgress < max_value)
        Slider(
          min: 0,
          max: max_value,
          label: sliderProgress.toString(),
          value: sliderProgress,
          activeColor: Colors.blueGrey,
          inactiveColor: Colors.blue,
          onChanged: (double value) {
            setState(() {
              sliderProgress = value;
            });
          },
          onChangeStart: (double value) {
            isTap = true;
          },
          onChangeEnd: (double value) {
            isTap = false;
            setState(() {
              playProgress = value.toInt();
            });
            audioPlayer?.seek(Duration(milliseconds: value.toInt()));
          },
        ),
      // Row of buttons for play control
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextButton(
              onPressed: () async {
                // Logic for playing audio
                if (audioPlayer == null) {
                  audioPlayer = AudioPlayer()..play(AssetSource("music1.mp3"));
                  setState(() {
                    playing = true;
                  });
                  // Listening for duration changes
                  audioPlayer?.onDurationChanged.listen((Duration event) {
                    setState(() {
                      max_value = event.inMilliseconds.toDouble();
                    });
                  });
                  // Listening for position changes
                  audioPlayer?.onPositionChanged.listen((Duration event) {
                    if (isTap) return;
                    setState(() {
                      sliderProgress = event.inMilliseconds.toDouble();
                      playProgress = event.inMilliseconds;
                    });
                  });

                  // Listening for player state changes
                  audioPlayer?.onPlayerStateChanged.listen((PlayerState state) {
                    setState(() {
                      playing = state == PlayerState.playing;
                    });
                  });
                } else {
                  audioPlayer?.resume();
                }
              },
              child: Text("Play")),
          Container(
            width: 10,
          ),
          TextButton(
              onPressed: () async {
                // Logic for pausing audio
                audioPlayer?.pause();
              },
              child: Text("Pause")),
          Container(
            width: 10,
          ),
          TextButton(
              onPressed: () async {
                // Logic for stopping audio
                audioPlayer?.stop();
                audioPlayer = null;
              },
              child: Text("Stop")),
        ],
      ),
    ];
  }

  var playing = false; // Variable to track if audio is playing

  // Building background for the lyric reader
  List<Widget> buildReaderBackground() {
    return [
      Positioned.fill(
        child: Image.asset(
          "bg.jpeg",
          fit: BoxFit.cover,
        ),
      ),
      Positioned.fill(
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 10, sigmaY:
What have you tried so far?

I have added all the following dependencies: flutter_lyric: ^2.0.4+6 and flutter_lyric: ^2.0.4+6

Did you check FlutterFlow's Documentation for this topic?
No
1