How to change scroll direction on ontap in flutter?-CodePudding

I have 10 images in column with singlechildscrollview and i want to change that 10 image scrol direction vertical to hrizontal on ontap to container how to do this help me.....

in simple i want to change column to row on ontap......

I have 10 images in column with singlechildscrollview and i want to change that 10 image scrol direction vertical to hrizontal on ontap to container how to do this help me.....

in simple i want to change column to row on ontap......

    import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyApp(),
    ),
  );
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List imglist = [
    Image.asset('images/1.jpeg'),
    Image.asset('images/2.jpeg'),
    Image.asset('images/3.jpeg'),
    Image.asset('images/4.jpeg'),
    Image.asset('images/5.jpeg'),
    Image.asset('images/6.jpeg'),
    Image.asset('images/7.jpeg'),
    Image.asset('images/8.jpeg'),
    Image.asset('images/9.jpeg'),
    Image.asset('images/10.jpeg'),
  ];
  @override
  Widget build(BuildContext context) {
    double h = MediaQuery.of(context).size.height;
    double w = MediaQuery.of(context).size.width;

    return Scaffold(
        resizeToAvoidBottomInset: false,
        appBar: AppBar(
          centerTitle: true,
          elevation: 0,
          backgroundColor: Colors.black,
          title: const Text(
            "GALLERY VIEWER",
            style: TextStyle(fontSize: 30, letterSpacing: 3),
          ),
          actions: [Icon(Icons.grid_view_sharp)],
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              Image.asset(
                'images/1.jpeg',
              ),
              Image.asset(
                'images/2.jpeg',
              ),
              Image.asset(
                'images/3.jpeg',
              ),
              Image.asset(
                'images/4.jpeg',
              ),
              Image.asset(
                'images/5.jpeg',
              ),
              Image.asset(
                'images/6.jpeg',
              ),
              Image.asset(
                'images/7.jpeg',
              ),
              Image.asset(
                'images/8.jpeg',
              ),
              Image.asset(
                'images/9.jpeg',
              ),
              Image.asset(
                'images/10.jpeg',
              ),
            ],
          ),
        ),
        backgroundColor: Colors.black);
  }
}

CodePudding user response：

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyApp(),
    ),
  );
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isChangeConstraints = false;
  List imglist = [
    Image.asset('images/1.jpeg'),
    Image.asset('images/2.jpeg'),
    Image.asset('images/3.jpeg'),
    Image.asset('images/4.jpeg'),
    Image.asset('images/5.jpeg'),
    Image.asset('images/6.jpeg'),
    Image.asset('images/7.jpeg'),
    Image.asset('images/8.jpeg'),
    Image.asset('images/9.jpeg'),
    Image.asset('images/10.jpeg'),
  ];
  @override
  Widget build(BuildContext context) {
    double h = MediaQuery.of(context).size.height;
    double w = MediaQuery.of(context).size.width;

    return Scaffold(
        resizeToAvoidBottomInset: false,
        appBar: AppBar(
          centerTitle: true,
          elevation: 0,
          backgroundColor: Colors.black,
          title: const Text(
            "GALLERY VIEWER",
            style: TextStyle(fontSize: 30, letterSpacing: 3),
          ),
          actions: [Icon(Icons.grid_view_sharp)],
        ),
        body: SingleChildScrollView(
          child: isChangeConstraints ? Column(
            children: [
              Image.asset(
                'images/1.jpeg',
              ),
              Image.asset(
                'images/2.jpeg',
              ),
              Image.asset(
                'images/3.jpeg',
              ),
              Image.asset(
                'images/4.jpeg',
              ),
              Image.asset(
                'images/5.jpeg',
              ),
              Image.asset(
                'images/6.jpeg',
              ),
              Image.asset(
                'images/7.jpeg',
              ),
              Image.asset(
                'images/8.jpeg',
              ),
              Image.asset(
                'images/9.jpeg',
              ),
              Image.asset(
                'images/10.jpeg',
              ),
            ],
          ) ; Row(
           scrollDirection: Axis.Vertical,
          children:[
              Image.asset(
                'images/1.jpeg',
              ),
              Image.asset(
                'images/2.jpeg',
              ),
              Image.asset(
                'images/3.jpeg',
              ),
              Image.asset(
                'images/4.jpeg',
              ),
              Image.asset(
                'images/5.jpeg',
              ),
              Image.asset(
                'images/6.jpeg',
              ),
              Image.asset(
                'images/7.jpeg',
              ),
              Image.asset(
                'images/8.jpeg',
              ),
              Image.asset(
                'images/9.jpeg',
              ),
              Image.asset(
                'images/10.jpeg',
              ),
          ]),
        ),
        backgroundColor: Colors.black);
  }
}

CodePudding user response：

i have modified your code a bit, see blow code how you can achieve it by using ListView-

  import 'package:flutter/material.dart';
    void main() {
      runApp(
        MaterialApp(
          debugShowCheckedModeBanner: false,
          home: MyApp(),
        ),
      );
    }
    
    class MyApp extends StatefulWidget {
      MyApp({Key? key}) : super(key: key);
    
      @override
      State<MyApp> createState() => _MyAppState();
    }
    
    class _MyAppState extends State<MyApp> {
     
      List imglist = [
        Image.asset('images/1.jpeg'),
        Image.asset('images/2.jpeg'),
        Image.asset('images/3.jpeg'),
        Image.asset('images/4.jpeg'),
        Image.asset('images/5.jpeg'),
        Image.asset('images/6.jpeg'),
        Image.asset('images/7.jpeg'),
        Image.asset('images/8.jpeg'),
        Image.asset('images/9.jpeg'),
        Image.asset('images/10.jpeg'),
      ];
      
      bool isVertical = true;
      
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            resizeToAvoidBottomInset: false,
            appBar: AppBar(
              centerTitle: true,
              elevation: 0,
              backgroundColor: Colors.black,
              title: const Text(
                "GALLERY VIEWER",
                style: TextStyle(fontSize: 30, letterSpacing: 3),
              ),
              actions: [
                IconButton(onPressed: (){
                  setState(() {
                    isVertical = !isVertical;
                  });
                }, icon:const Icon(Icons.grid_view_sharp))
              ],
            ),
            body: ListView.builder(
              itemCount: imglist.length,
              scrollDirection: isVertical ? Axis.vertical : Axis.horizontal,
              itemBuilder: (context, index){
                return imglist[index];
              },
            ),
            backgroundColor: Colors.black,
        );
      }
    }