a list

import 'package:flutter/material.dart';

void main() async {
  runApp(MyAppA());
}

final ration = 0.7;
final circleSize = 40.0;

class MyAppA extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          body: SafeArea(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                buildList(100),
                buildList(150),
                buildList(300),
                buildList(),
                Padding(
                  padding: const EdgeInsets.only(right: 80),
                  child: buildList(),
                ),
                Padding(
                  padding: const EdgeInsets.only(right: 8),
                  child: buildList(),
                ),
                Padding(
                  padding: const EdgeInsets.only(left: 120),
                  child: buildList(),
                ),
              ],
            ),
          ),
        ),
      );

  Widget buildList([double availableWidth]) {
    return SizedBox(
      height: circleSize,
      width: availableWidth,
      child: Row(
        children: [
          Expanded(
            child: LayoutBuilder(
              builder: (BuildContext context, BoxConstraints constraints) {
                final itemSize = circleSize * ration;
                final len = constraints.maxWidth ~/ itemSize;
                final cantFit = ((constraints.maxWidth % itemSize) <= (ration * 10));
                return MyWidget(
                  colors: Colors.primaries,
                  length: cantFit ? len - 1 : len,
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  const MyWidget({Key key, this.colors, this.length}) : super(key: key);
  final int length;
  final List<Color> colors;

  @override
  Widget build(BuildContext context) => ListView.builder(
        physics: NeverScrollableScrollPhysics(),
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, index) {
          if (index == 0) {
            return Row(
              children: <Widget>[
                SizedBox(width: ration * 10),
                Align(
                  widthFactor: ration,
                  child: CircleAvatar(backgroundColor: colors[index], child: Text(index.toString())),
                ),
              ],
            );
          }
          if (index == length - 1) {
            return Stack(
              overflow: Overflow.visible,
              children: <Widget>[
                Align(
                    widthFactor: ration,
                    child: CircleAvatar(backgroundColor: Colors.blue, child: Icon(Icons.more_horiz))),
              ],
            );
          }
          return Align(
            widthFactor: ration,
            child: CircleAvatar(backgroundColor: colors[index], child: Text(index.toString())),
          );
        },
        itemCount: length,
      );
}