Flutter UI #24: Fun with 3D ListView Wheel in Flutter


Flutter UI #24: Fun with 3D ListView Wheel in Flutter

Tutorial and code of 3D ListView Wheel in Flutter. Copy and paste the below code as per your requirements.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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

  List<Widget> listtiles = [
    const ListTile(
      leading: Icon(Icons.portrait),
      title: Text("Portrait"),
      subtitle: Text("Beautiful View..!"),
      trailing: Icon(Icons.arrow_forward_ios),
    ),
    const ListTile(
      leading:  Icon(Icons.landscape),
      title:  Text("LandScape"),
      subtitle: Text("Beautiful View..!"),
      trailing:  Icon(Icons.remove),
    ),
    const ListTile(
      leading:  Icon(Icons.map),
      title: Text("Map"),
      subtitle: Text("Map View..!"),
      trailing: Icon(Icons.wb_sunny),
    ),
    const ListTile(
      leading: Icon(Icons.landscape),
      title: Text("LandScape"),
      subtitle: Text("Wonderful View..!"),
      trailing:  Icon(Icons.wb_sunny),
    ),
    const ListTile(
      leading:  Icon(Icons.list),
      title:  Text("List Example"),
      subtitle:  Text("List Wheel Scroll view .!"),
      trailing:  Icon(Icons.cloud),
    ),
    const ListTile(
      leading:  Icon(Icons.settings),
      title: Text("Settings"),
      subtitle: Text("Change the setting..!"),
      trailing:  Icon(Icons.portrait),
    ),
    const ListTile(
      leading: Icon(Icons.event),
      title: Text("Add data"),
      subtitle: Text("Data View..!"),
      trailing: Icon(Icons.add),
    ),
    const ListTile(
      leading:  Icon(Icons.landscape),
      title:  Text("LandScape"),
      subtitle:  Text("Beautiful View..!"),
      trailing:  Icon(Icons.wb_sunny),
    ),
    const ListTile(
      leading:  Icon(Icons.email),
      title:  Text("Email"),
      subtitle: Text("Check Email..!"),
      trailing: Icon(Icons.arrow_forward),
    ),
    const 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: const Center(child: Text("3D ListView Wheel"),),
        ),
        body: Center(
          child: ListWheelScrollView(
            controller: _controller,
            itemExtent: 80,
            magnification: 1.2,
            useMagnifier: true,
            physics: const FixedExtentScrollPhysics(),
            children: listtiles,
          ),
        ));
  }
}

Leave a Reply

Your email address will not be published.