ListView Fading Edge - флаттер - PullRequest
Новая
       12

ListView Fading Edge - флаттер

0 голосов
/ 27 июня 2018

кто-нибудь сталкивался с чем-то вроде fadingEdgeLength в Android для Flutter, чтобы при прокрутке вверх элементы начинали исчезать в верхней части экрана?

Ниже мой интерфейс построен из виджетов.

Если это поможет, вот свойства, на которые я ссылаюсь:

Android: fadingEdgeLength = "10dp"

андроида: requiresFadingEdge = "горизонтальный"> 

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text('CMS Users'),
  ),
  body: ListView.builder(
      padding: EdgeInsets.only(top: 20.0, left: 4.0),
      itemExtent: 70.0,
      itemCount: data == null ? 0 : data.length,
      itemBuilder: (BuildContext context, int index) {
        return Card(
          elevation: 10.0,
          child: InkWell(
            onTap: () {
              Navigator.push(
                  context,
                  new MaterialPageRoute(
                    builder: (BuildContext context) =>
                        new PeopleDetails("Profile Page", profiles[index]),
                  ));
            },
            child: ListTile(
              leading: CircleAvatar(
                child: Text(profiles[index].getInitials()),
                backgroundColor: Colors.deepPurple,
                radius: 30.0,
              ),
              title: Text(
                  data[index]["firstname"] + "." + data[index]["lastname"]),
              subtitle: Text(
                  data[index]["email"] + "\n" + data[index]["phonenumber"]),
            ),
          ),
        );
      }),
   );
 }
}

Ответы [ 3 ]

0 голосов
/ 28 октября 2018

Вы можете применить ShaderMask поверх ListView и использовать BlendMode, чтобы получить то, что вы хотите. 

Widget animationsList() {
    return Expanded(
      child: ShaderMask(
        shaderCallback: (Rect bounds) {
            return LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: <Color>[Colors.transparent,Colors.red],
            ).createShader(bounds);
        },
        child: Container(height: 200.0, width: 200.0, color: Colors.blue,),
        blendMode: BlendMode.dstATop,
     ),
);
0 голосов
/ 20 июля 2019

У меня был похожий запрос, поэтому я создал библиотеку для этой задачи. Вы можете найти его здесь: fading_edge_scrollview

Чтобы использовать его, вам нужно добавить ScrollController к вашему ListView и затем передать это ListView как дочерний элемент в FadingEdgeScrollView.fromScrollView конструктор

0 голосов
/ 27 июня 2018

Попробуйте использовать 

Text(
        'This is big text, I am using Flutter and trying to fade text',
        overflow: TextOverflow.fade,
        maxLines: 1,
      ),
...