Flutter List Wheel ScrollView - A 3D ListView in flutter with Example
Flutter List Wheel ScrollView - A 3D ListView in flutter with Example

Hi Guys, Welcome to Proto Coders Point, In this Flutter Tutorial we will implement Widget of the week i.e  ListWheelScrollView used to build a listview with 3d scrollView effect in flutter.

Brief about Flutter ListWheelScrollView

ListView are great but sometimes ordinary Flutter ListView are boring, Therefore Flutter Team have built a new widget of the week that is List Wheel ScrollView.

This Widget is similar to a ListView but the difference here is that the  list will be somewhat like a 3d ListView. It’s a box in which a children is on a wheel can be scrolled.

Here i main thing to understand is When the list at the zero scroll offset,the first child is aligned with the middle on the screen, and when the list is at the final scroll offset, the list child is aligned with the middle viewport.

Here the children are been rendereed as a circular rotation rather then simple scrolling on a plane.

Hero Animation flutter example
Hero Animation flutter example

Visit official site to learn in depth Here

So Let’s set Implementing this Flutter Listwheelscrollview widget class in our project.

Widget Class Code for above widget

ListWheelScrollView(
             controller: _controller,
             itemExtent: 80,
             diameterRatio: 2.5,
             physics: FixedExtentScrollPhysics(),
             children: <Widget>[], //list of widget Here

ListWheelScrollView have many optional properties, where 2 property of them are mandatory @required children <Widget> [ ], and itemExtent : 80 

children <Widget> [ ] : accepts list of widgets

itemExtent : Specifies the pixel Height of each Children.

diameterRatio : you can tune the diameter of the list wheel widget.

offAxixFraction : -1.5 : Here is an Example on how the 3d listview looks when offassexFraction is set to -1.5.

Flutter List Wheel Scrollview Example

You can add a magnification effect to the flutter List Wheel ScrollView

magnification : used to set the zoomed size.

useMagnifier : true or false.

Here is an example for that

Flutter 3d Listview
usemagnifier is set to true

Creating a list of Widget

List<Widget> listtiles = [
  ListTile(
    leading: Icon(Icons.portrait),
    title: Text("Portrait"),
    subtitle: Text("Beautiful View..!"),
    trailing: Icon(Icons.arrow_forward_ios),
  ),
  ListTile(
    leading: Icon(Icons.landscape),
    title: Text("LandScape"),
    subtitle: Text("Beautiful View..!"),
    trailing: Icon(Icons.remove),
  ),
  ListTile(
    leading: Icon(Icons.map),
    title: Text("Map"),
    subtitle: Text("Map View..!"),
    trailing: Icon(Icons.wb_sunny),
  ),
  ListTile(
    leading: Icon(Icons.landscape),
    title: Text("LandScape"),
    subtitle: Text("Wonderful View..!"),
    trailing: Icon(Icons.wb_sunny),
  ),
  ListTile(
    leading: Icon(Icons.list),
    title: Text("List Example"),
    subtitle: Text("List Wheel Scroll view .!"),
    trailing: Icon(Icons.cloud),
  ),
  ListTile(
    leading: Icon(Icons.settings),
    title: Text("Settings"),
    subtitle: Text("Change the setting..!"),
    trailing: Icon(Icons.portrait),
  ),
  ListTile(
    leading: Icon(Icons.event),
    title: Text("Add data"),
    subtitle: Text("Data View..!"),
    trailing: Icon(Icons.add),
  ),
  ListTile(
    leading: Icon(Icons.landscape),
    title: Text("LandScape"),
    subtitle: Text("Beautiful View..!"),
    trailing: Icon(Icons.wb_sunny),
  ),
  ListTile(
    leading: Icon(Icons.email),
    title: Text("Email"),
    subtitle: Text("Check Email..!"),
    trailing: Icon(Icons.arrow_forward),
  ),
  ListTile(
    leading: Icon(Icons.games),
    title: Text("Games"),
    subtitle: Text("Play Games..!"),
    trailing: Icon(Icons.zoom_out_map),
  ),
];

In the above snippet code i have simply created a list of ListTile widgets .

The ListTile widgets simple have  some of it’s property like leading widget, title & subtitle of the listTile and a trailing widget as an Icon widget.

Then i m just using this List of Widgets in ListWheelScrollView Widgets to show the Items as it’s children.

ListWheelScrollView(
            controller: _controller,
            itemExtent: 80,
            magnification: 1.2,
            useMagnifier: true,
            physics: FixedExtentScrollPhysics(),
            children: listtiles, // Here listtiles is the List of Widgets.
          ),

Flutter List Wheel ScrollView – A 3D ListView in a flutter with Example

Complete Source code

Once you know the Basic of the Widget, Just Copy paste the Below lines of code in main.dart file.

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(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final FixedExtentScrollController _controller = FixedExtentScrollController();

  List<Widget> listtiles = [
    ListTile(
      leading: Icon(Icons.portrait),
      title: Text("Portrait"),
      subtitle: Text("Beautiful View..!"),
      trailing: Icon(Icons.arrow_forward_ios),
    ),
    ListTile(
      leading: Icon(Icons.landscape),
      title: Text("LandScape"),
      subtitle: Text("Beautiful View..!"),
      trailing: Icon(Icons.remove),
    ),
    ListTile(
      leading: Icon(Icons.map),
      title: Text("Map"),
      subtitle: Text("Map View..!"),
      trailing: Icon(Icons.wb_sunny),
    ),
    ListTile(
      leading: Icon(Icons.landscape),
      title: Text("LandScape"),
      subtitle: Text("Wonderful View..!"),
      trailing: Icon(Icons.wb_sunny),
    ),
    ListTile(
      leading: Icon(Icons.list),
      title: Text("List Example"),
      subtitle: Text("List Wheel Scroll view .!"),
      trailing: Icon(Icons.cloud),
    ),
    ListTile(
      leading: Icon(Icons.settings),
      title: Text("Settings"),
      subtitle: Text("Change the setting..!"),
      trailing: Icon(Icons.portrait),
    ),
    ListTile(
      leading: Icon(Icons.event),
      title: Text("Add data"),
      subtitle: Text("Data View..!"),
      trailing: Icon(Icons.add),
    ),
    ListTile(
      leading: Icon(Icons.landscape),
      title: Text("LandScape"),
      subtitle: Text("Beautiful View..!"),
      trailing: Icon(Icons.wb_sunny),
    ),
    ListTile(
      leading: Icon(Icons.email),
      title: Text("Email"),
      subtitle: Text("Check Email..!"),
      trailing: Icon(Icons.arrow_forward),
    ),
    ListTile(
      leading: Icon(Icons.games),
      title: Text("Games"),
      subtitle: Text("Play Games..!"),
      trailing: Icon(Icons.zoom_out_map),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("ListView ScrollView Wheel"),
        ),
        body: Center(
          child: ListWheelScrollView(
            controller: _controller,
            itemExtent: 80,
            magnification: 1.2,
            useMagnifier: true,
            physics: FixedExtentScrollPhysics(),
            children: listtiles, //List of widgets
          ),
        ));
  }
}