Text between 2 containers in flutter

Question

I would like to show a text between 2 containers in flutter. The problem is that the containers adapt to the size of the text. I do not want that behavior. want something like this. (Am very new to flutter).

I want to make a music player. The text can not be split.

Answer 1

Edit: Accordingly to what you've asked, you want to create a custom player that updates its color based on the song current position.

For that, you can create a CustomPaint widget with a CustomPainter player that updates whenever the song state changes.

class MyPlayerBar extends CustomPainter {
  MyPlayerBar({this.fullSongTimeInSeconds, this.currentSecond});

  final int fullSongTimeInSeconds;
  final int currentSecond;

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint();
    double cursor = (currentSecond * size.width) / fullSongTimeInSeconds;
    Radius cornerRadius = Radius.circular(3.0);

    // Already played half color (your darker orange)
    paint.color = Color.fromRGBO(206, 69, 0, 1.0);

    // Painting already played half
    canvas.drawRRect(
        RRect.fromRectAndCorners(Rect.fromLTWH(0.0, 0.0, cursor, size.height),
            topLeft: cornerRadius, bottomLeft: cornerRadius),
        paint);

    // Yet to play half color (your lighter orange)
    paint.color = Color.fromRGBO(227, 113, 18, 1.0);

    // Painting the remaining space
    canvas.drawRRect(
        RRect.fromRectAndCorners(Rect.fromLTWH(cursor, 0.0, size.width - cursor, size.height),
            bottomRight: cornerRadius, topRight: cornerRadius),
        paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

I've created a full example that simulates a 3 minute song (180 seconds) that will result in the following:

Full example code:

class MyPlayer extends StatefulWidget {
  _MyPlayerState createState() => _MyPlayerState();
}

class _MyPlayerState extends State<MyPlayer> {
  int _songCurrentPosition = 0;
  int _fullSongInSeconds = 180; // 3 minutes song

  @override
  void initState() {
    super.initState();
    _songPlaying();
  }

  void _songPlaying() async {
    if (_songCurrentPosition >= _fullSongInSeconds) return;
    await Future.delayed(Duration(seconds: 1));
    setState(() => _songCurrentPosition += 1);
    _songPlaying();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My player'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: CustomPaint(
          painter: MyPlayerBar(
            currentSecond: _songCurrentPosition, // Your current song position in seconds
            fullSongTimeInSeconds: _fullSongInSeconds,
          ),
          child: Container(
            alignment: Alignment.center,
            height: 30.0,
            width: double.infinity,
            child: Text(
              'Playing: 01 - Hey, this is my life',
              style: TextStyle(color: Colors.white, fontWeight: FontWeight.w500),
            ),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(
                Radius.circular(10.0),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class MyPlayerBar extends CustomPainter {
  MyPlayerBar({this.fullSongTimeInSeconds, this.currentSecond});

  final int fullSongTimeInSeconds;
  final int currentSecond;

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint();
    double cursor = (currentSecond * size.width) / fullSongTimeInSeconds;
    Radius cornerRadius = Radius.circular(3.0);

    // Already played half color (your darker orange)
    paint.color = Color.fromRGBO(206, 69, 0, 1.0);

    // Painting already played half
    canvas.drawRRect(
        RRect.fromRectAndCorners(Rect.fromLTWH(0.0, 0.0, cursor, size.height),
            topLeft: cornerRadius, bottomLeft: cornerRadius),
        paint);

    // Yet to play half color (your lighter orange)
    paint.color = Color.fromRGBO(227, 113, 18, 1.0);

    // Painting the remaining space
    canvas.drawRRect(
        RRect.fromRectAndCorners(Rect.fromLTWH(cursor, 0.0, size.width - cursor, size.height),
            bottomRight: cornerRadius, topRight: cornerRadius),
        paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}