I have a list of images that I want to distribute into two columns of an avatar circle, with one column taking half of the images and the other column taking the rest of the images.

I put a simple example of code how can I apply that to it? Also how to handle the length of the list?

The code:

import 'package:flutter/material.dart';

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

  @override
  State<AddUserPage> createState() => _AddUserPageState();
}

class _AddUserPageState extends State<AddUserPage> {
  final List<String> profiles = [
    'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-05_orig.png',
    'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-04_orig.png',
    'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-01_orig.png',
    'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-02_orig.png',
    'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-03_orig.png'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            SizedBox(
              height: 250,
              child: ListWheelScrollView.useDelegate(
                squeeze: 1.4,
                itemExtent: 150,
                diameterRatio: 9,
                onSelectedItemChanged: (value) {},
                physics: const FixedExtentScrollPhysics(),
                childDelegate: ListWheelChildBuilderDelegate(
                  childCount: profiles.length,
                  builder: (context, index) => Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      CircleAvatar(
                        radius: 50,
                        backgroundImage: AssetImage(profiles[index]),
                      ),
                      CircleAvatar(
                        radius: 50,
                        backgroundImage: AssetImage(profiles[index]),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

CodePudding user response：

Full Code : -

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(
      title: 'Image',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: const AddUserPage(),
    );
  }
}

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

  @override
  State<AddUserPage> createState() => _AddUserPageState();
}

class _AddUserPageState extends State<AddUserPage> {
  int centeredWidgetIndex = 0;

  final List<String> profiles = [
    'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-01_orig.png',
    'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-02_orig.png',
    'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-03_orig.png',
    'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-04_orig.png',
    'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-05_orig.png',
  ];

  int profileIndex(int index, int loopIndex) {
    if (loopIndex == 0) {
      return index   index;
    } else {
      return index   index   1;
    }
  }

  int gridLength() {
    return ((profiles.length / 2).ceil());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(
              height: 320,
              child: ListWheelScrollView.useDelegate(
                squeeze: 1.2,
                itemExtent: 150,
                diameterRatio: 9,
                offAxisFraction: 0.33,
                onSelectedItemChanged: (value) {
                  centeredWidgetIndex = value;
                  setState(() {});
                },
                physics: const FixedExtentScrollPhysics(),
                childDelegate: ListWheelChildBuilderDelegate(
                  childCount: gridLength(),
                  builder: (context, index) => Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      for (int i = 0; i < 2; i  ) ...[
                        if (index == gridLength() - 1 &&
                            i == 1 &&
                            (profiles.length % 2 != 0)) ...[
                          CircleAvatar(
                            radius: index == centeredWidgetIndex ? 65 : 50,
                            backgroundColor: Colors.transparent,
                          ),
                        ] else ...[
                          CircleAvatar(
                            radius: index == centeredWidgetIndex ? 65 : 50,
                            child: ClipOval(
                              child: Image.network(
                                profiles[profileIndex(index, i)],
                                fit: BoxFit.fill,
                                loadingBuilder: (BuildContext context,
                                    Widget child,
                                    ImageChunkEvent? loadingProgress) {
                                  if (loadingProgress == null) return child;
                                  return Center(
                                    child: CircularProgressIndicator(
                                      value:
                                          loadingProgress.expectedTotalBytes !=
                                                  null
                                              ? loadingProgress
                                                      .cumulativeBytesLoaded /
                                                  loadingProgress
                                                      .expectedTotalBytes!
                                              : null,
                                    ),
                                  );
                                },
                              ),
                            ),
                          ),
                        ]
                      ]
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Output : -