CODEWITHSUNDEEP
flutter
leelo
leelo

Reputation: 45

Flutter: Horizontal auto Scrolling

as shown

I would like some help with getting the artist names to automatically scroll from right to left (or left to right if that's easier for you) in flutter, but I am not sure how to go about that and would appreciate someone's help :) I have looked into Horizontal ListViews and all but I was getting errors so I didn't move forward with that.

@override
  Widget build(BuildContext context) {
    return Scaffold(body: Stack(
        children: <Widget>[
          Container(decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/images/danceClub.jpg"),
              fit: BoxFit.cover,
            ),
          ),
              child: BackdropFilter(
                  filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
                  child: Container(decoration: BoxDecoration(color: Colors.black.withOpacity(0.2))))
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Center(child: Container(child: Text('Now Playing', style: TextStyle(fontSize: 30, color: Colors.black),),)),

              _imageURLValue != null ? Image.network(_imageURLValue, height: 300) : Container(),

              Row(mainAxisSize: MainAxisSize.max, children: <Widget>[Padding(padding: EdgeInsets.only(left: 30.0)), Text('${_songName}', style: TextStyle(fontSize: 25, color: Colors.amber)), Text(' - ', style: TextStyle(fontSize: 25, color: Colors.black)),
                Expanded(child: ListView.builder(shrinkWrap: true, itemCount: _artistsNames == null ? 0 : _artistsNames.length,
                      itemBuilder: (context, i) { return Text(_artistsNames[i], style: TextStyle(fontSize: 25, color: Colors.blue),);}))]),

              Container(child: RaisedButton(
                onPressed: () => Navigator.pop(context),
                child: Text('Exit to menu'),
              )),

              Container(child: RaisedButton(
                onPressed: getData,
                child: Text('Get data from http!', style: TextStyle(color: Colors.white, fontStyle: FontStyle.italic, fontSize: 20.0)),
              ))
            ],
          )
        ]
    )
    );
  }
}

Upvotes: 0

Views: 7048

Answers (2)

Etienne
Etienne

Reputation: 2287

There is a Flutter plugin that seems to match exactly your need:

marquee:

https://pub.dev/packages/marquee

A Flutter widget that scrolls text infinitely. Provides many customizations including custom scroll directions, durations, curves as well as pauses after every round.

Upvotes: 1

dubace
dubace

Reputation: 1621

The most simple solution is to use carousel_slider library

Upvotes: 0

Related Questions