CODEWITHSUNDEEP
flutter
TommyF
TommyF

Reputation: 7150

Flutter - Image repeat only scales to screen size, not parent size

I have a widget that allows the user to drag a scale to select a value, similar to the basic Slider widget but "inverted" i.e. the value sliders position is fixed and you move the scale in the background to adjust the value.
The scale should be unbounded / infinite and I thought I could use a small image + ImageRepeat.repeatX for that. But it seems this only scales to the initially visible screen, not to the actual parent width.

Is there a way to force it to fill the entire parents width or update after a translate?

Minimal example:

import 'package:flutter/material.dart';

class SliderTest extends StatefulWidget {
@override
  _SliderTestState createState() => _SliderTestState();
}

class _SliderTestState extends State<SliderTest> {
double foo = 100.0;

@override
Widget build(BuildContext context) {
return new Scaffold(
  appBar: new AppBar(
    title: new Text('SliderTest'),
  ),
  body: new Builder(builder: (context) {
    return new Center(
      child: new Column(
        children: <Widget>[
          new Text("$foo"),
          new GestureDetector(
            onHorizontalDragUpdate: (v) { setState(() { foo += v.primaryDelta; }); },
            child: new Container(
              width: 5000.0,
              height: 80.0,
              color: Colors.green,
              child: new Transform.translate(
                offset: new Offset(foo, 0.0),
                child: new Image.network('http://4d94o75ofvdkz8tr3396n8cn.wpengine.netdna-cdn.com/wp-content/uploads/Scale_4x.jpg', repeat: ImageRepeat.repeatX,)
              )
            )
          )
        ],
      ),
    );
  })
);
}
}

The parent Container is clearly wide enough as seen by the green background color, but the transformed image only scales to the initial screen width and not beyond. Is there a way to fix that without using a huge image file?

Upvotes: 3

Views: 4691

Answers (1)

R&#233;mi Rousselet
R&#233;mi Rousselet

Reputation: 277127

That is actually wrong. repeat: ImageRepeat.repeatX do fill the parent, not the screen.

The problem is that even although you defined your parent with a with of 5000.0, it doesn't actually have that width. As Column adds a maximum width constraint to its children.

What you need is to add an in-between widget that can be bigger on the inside. This can be an OverflowBox or a SingleChildScrolLView, even a ConstrainedBox.

Upvotes: 3

Related Questions