Stretching Image from center

Question

I am stretching the image from the center. The image should be stretched from the center, image height should be the same as the content size. I am getting content height from GlobalKey. For ex. image height is 700px and after loading content(listview) height is 1000px. Image height should be stretched 300px. It should work like 9patch image. It can be done with the help of centerSlice property. attaching code and image below.

  double heightTOadd = 0.0;
  GlobalKey key = GlobalKey();
  @override
  void initState() {
    super.initState();
    Future.delayed(Duration(milliseconds: 1000), () async {
      setState(() {
        heightTOadd = key.currentContext!.size!.height;
      });
    });
  }
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Stack(
        children: [
          Container(
            width: MediaQuery.of(context).size.width,
            height: heightTOadd,
            decoration: BoxDecoration(
                color: Colors.purple,
                image: DecorationImage(
                  alignment : Alignment.topCenter,
                  fit: BoxFit.fill,
                  // centerSlice: Rect.fromLTRB(MediaQuery.of(context).size.width/ 2, heightTOadd / 2,MediaQuery.of(context).size.width/ 2, heightTOadd / 2),
                  image: AssetImage('images/homeBG.png'),
                )),
          ),
          listView(),
        ],
      ),
    );
  }
  Widget listView() {
    return ListView(
      key: key,
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      children: [cell(), cell(), cell(), cell(), cell(), cell(), cell(), cell(), cell(), cell(), cell(), cell(), ],
    );
  }
  Widget cell() {
    return Container(
        padding: const EdgeInsets.all(20),
        child:Container(height: 150, color: Colors.red.withOpacity(0.0),)
    );
  }

Canilho · Answer 1 · 2023-08-11T10:18:27.820

0

I'm not sure if I understood your question, but I think this question has already been answered here

There are several possible solutions, one of the suggestions is to use a FittedBox. Notice that there are different types of BoxFit, which you can check on Flutter Documentation - BoxFit enum

Canvas can also be a solution for this. I remember doing something similar with Javascript. Check the following example, and the fiddle in one of the responses:

Canvas, draw (stretch) an image between a few points with Javascript without libraries

Notice that Flutter Canvas is very similar to the way JS Canvas works, but some code might be slightly different.

edited Aug 11 '23 at 10:18

answered Aug 10 '23 at 17:39

Canilho

944
5
11

I've already gone through this. Need to stretch image from a specific point. – Anis Mansuri Aug 10 '23 at 18:19
I've edited my answer. take a look at the last link I've submitted. You can probably use that in Flutter to create a stretch for your image, in any way you need. – Canilho Aug 11 '23 at 10:21

Stretching Image from center

1 Answers1