[Flutter] [ListWheelScrollView] Interesting wiget(1)

widget:ListWheelScrollView

The widget style of the roller has been using listview and other methods to scroll the list. The style is relatively simple. ListWheelScrollView can scroll the style of the list, which becomes very fancy, but it cannot be used when the list data is too much

---

Use examples and code:

import 'package:flutter/material.dart';

void main() {
    
    
 runApp(const MyApp());
}

class MyApp extends StatelessWidget {
    
    
 const MyApp({
    
    super.key});

 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
    
    
   return MaterialApp(
     title: 'Flutter Demo',
     theme: ThemeData(
       primarySwatch: Colors.blue,
     ),
     home: const MyHomePage(title: 'Flutter Demo Home Page'),
   );
 }
}

class MyHomePage extends StatefulWidget {
    
    
 const MyHomePage({
    
    super.key, required this.title});

 final String title;

 @override
 State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
    
    
 @override
 Widget build(BuildContext context) {
    
    
   return Scaffold(
       appBar: AppBar(
         title: Text(widget.title),
       ),
       body: Container(
           color: Colors.amberAccent,
           child: ListWheelScrollView(
               perspective: 0.003,
               offAxisFraction: -0.5, //偏移距离
               itemExtent: 150, //高度
               diameterRatio: 1.5, //调整直径
               //放大镜功能，useMagnifier开启之后才能使用，放大倍数，就是当前显示的widget 放大的倍数
               useMagnifier: true,
               magnification: 1.5,
               children: List.generate(
                   10,
                   (index) => Card(
                         color: Colors
                             .primaries[index % (Colors.primaries.length)],
                         child: const ListTile(
                           title: Text("ok"),
                           trailing: Icon(Icons.baby_changing_station),
                         ),
                       )))));
 }
}

---

screenshot:

When squeeze is set to 2, the display is as follows:

import 'package:flutter/material.dart';

void main() {
    
    
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
    
    
  const MyApp({
    
    super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
    
    
  const MyHomePage({
    
    super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Container(
            color: Colors.amberAccent,
            child: ListWheelScrollView(
                // perspective: 0.003,
                squeeze: 1, //有点类似分页的工，1 时候就多页，2 显示的页面就更少，widget 会叠加在一起
                // offAxisFraction: -0.5, //偏移距离
                itemExtent: 150, //高度
                // diameterRatio: 1.5, //调整直径
                //放大镜功能，useMagnifier开启之后才能使用，放大倍数，就是当前显示的widget 放大的倍数
                // useMagnifier: true,
                // magnification: 1.5,
                children: List.generate(
                    10,
                    (index) => Card(
                          color: Colors
                              .primaries[index % (Colors.primaries.length)],
                          child: const ListTile(
                            title: Text("ok"),
                            trailing: Icon(Icons.baby_changing_station),
                          ),
                        )))));
  }
}

at last

You can try to use it by yourself and adjust different parameters. When there is a lot of data to be displayed, do not use this widget, and the performance will have a big problem.