How to display an image partially in flutter to get a curtain-raising effect?

Issue

I want to display an image in flutter such that it gives an effect of curtain-raising animation based on the slider values.

For example, I am displaying the IMAGE.jpg which has a fixed height and width on the flutter app.

The slider has 0 to 10 range.

• When 0: the slider value is 0 then the image layout area is displayed 100% black.

• When 1: Bottom 10% is displayed and the top 90% is black

• When 2: Bottom 20% is displayed and the top 80% is black

and similarly

• When 10: 100% is displayed

How can this effect be created?

Solution

To create this curtain effect you can use the Slider and Align widgets. You can set heightFactor inside the Align class to create a percentage curtain effect. Inside the Slider widget you can now set the value of the heightFactor to create the curtain effect.

Here a minimal working example:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: CurtainScaffold());
  }
}

class CurtainScaffold extends StatefulWidget {
  @override
  _CurtainScaffoldState createState() => _CurtainScaffoldState();
}

class _CurtainScaffoldState extends State<CurtainScaffold> {
  double curtain = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Slider(
              onChanged: (double val) {
                setState(() {
                  this.curtain = val;
                });
              },
              value: curtain,
              min: 0.0,
              max: 1.0,
            ),
            ClipRect(
              child: Align(
                alignment: Alignment.bottomCenter,
                heightFactor: curtain,
                child: Image.network(
                    'https://upload.wikimedia.org/wikipedia/commons/b/bd/Dts_news_bill_gates_wikipedia.JPG'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answered By – NiklasPor

Answer Checked By – Cary Denson (FlutterFixes Admin)