Home > other >  Change image background dynamically
Change image background dynamically

Time:10-19

I want to change the background image of my app, thanks the variable myId, this variable change dynamically in the terminal print('MenuCanvas : ${widget.myId}'); but the image background don't change in the emulator final ByteData data = await rootBundle.load(linPink[widget.myId]); , i tried to add a setstat but nothing ...

import 'package:flutter/material.dart';
import 'dart:ui' as ui;
import 'package:flutter/services.dart' show rootBundle;
import 'dart:async';
import 'dart:typed_data';

class CurvePainterContainer extends StatefulWidget {
  final int myId;
  final String myCountry; // Not used here
  const CurvePainterContainer(this.myId, this.myCountry);

  @override
  _CurvePainterContainerState createState() => _CurvePainterContainerState();
}

class _CurvePainterContainerState extends State<CurvePainterContainer> {
  ui.Image myImage;
  bool isImageLoaded = false;
  //String linPink= 'assets/images/canvas/pic9.jpg';

  List<String> linPink = [
    'assets/images/canvas/pic1.jpg',
    'assets/images/canvas/pic2.jpg',
    'assets/images/canvas/pic3.jpg',
    'assets/images/canvas/pic4.jpg',
  ];

  void initState() {
    super.initState();
    init();
  }

  //Get image
  Future<Null> init() async {
    //final ByteData data = await rootBundle.load(linPink[2]);
    final ByteData data = await rootBundle.load(linPink[widget.myId]);
    myImage = await loadImage(Uint8List.view(data.buffer));
  }

  //Load image
  Future<ui.Image> loadImage(List<int> img) async {
    final Completer<ui.Image> completer = Completer();
    ui.decodeImageFromList(img, (ui.Image img) {
      setState(() {
        isImageLoaded = true;
      });
      return completer.complete(img);
    });
    return completer.future;
  }

//Display image
  Widget _buildImage() {
    if (this.isImageLoaded) {
      return CustomPaint(
        size: Size(MediaQuery.of(context).size.width, 400), //400 = height
        painter: ImageEditor(image: myImage),
      );
    } else {
      Center(
        child: CircularProgressIndicator(),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    print('MenuCanvas : ${widget.myId}'); //Number index OK
    print('MenuCanvas : ${linPink[widget.myId]}'); //link to pic OK

    return Container(
      child: _buildImage(),
    );
  }
}

//Canvas creation
class ImageEditor extends CustomPainter {
  ui.Image image;
  ImageEditor({
    this.image,
  });

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint();
    paint.color = Colors.lightBlue.withOpacity(0.8);
    paint.style = PaintingStyle.fill; // Change this to fill
    paint.shader = ImageShader(image, TileMode.repeated, TileMode.repeated,
        Matrix4.identity().scaled(2.0).storage);

    var path = Path();
    path.moveTo(0, size.height * 1.380);
    path.quadraticBezierTo(size.width * 0.25, size.height * 1.700,
        size.width * 0.5, size.height * 1.400);
    path.quadraticBezierTo(size.width * 0.75, size.height * 1.100,
        size.width * 1.0, size.height * 1.150);
    path.lineTo(size.width, 0);
    path.lineTo(0, 0);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}


CodePudding user response:

You are calling init(); only in the init state of the class, which means its triggered only when the page is loaded. Your code works fine if you restart the app with a different id. Hot reload will not work in this case. You may have to call the init(); method again like on a button click or refresh indicator.

  • Related