Scroll Tester

main.dart

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Scroll Tester App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _selectedIndex = 0;

  // Helper function to get ordinal suffix for a number (e.g., 1st, 2nd, 3rd)
  static String _getOrdinal(int n) {
    if (n >= 11 && n <= 13) {
      return '${n}th';
    }
    switch (n % 10) {
      case 1:
        return '${n}st';
      case 2:
        return '${n}nd';
      case 3:
        return '${n}rd';
      default:
        return '${n}th';
    }
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Scroll Tester')),
      body: ListView.builder(
        itemCount: 50, // 50 containers as per requirement
        itemBuilder: (BuildContext context, int index) {
          final int itemNumber = index + 1; // Container numbers start from 1
          final String ordinal = _getOrdinal(itemNumber);
          // Cycle through Colors.primaries for different colors
          final Color itemColor =
              Colors.primaries[index % Colors.primaries.length];
          // Determine text color based on luminance for readability
          final Color textColor = itemColor.computeLuminance() > 0.5
              ? Colors.black
              : Colors.white;

          return Container(
            height: 20.0, // Strictly 20px height
            color: itemColor,
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 8.0),
              child: Row(
                crossAxisAlignment:
                    CrossAxisAlignment.center, // Vertically center content
                children: <Widget>[
                  Text(
                    ordinal,
                    style: TextStyle(
                      fontSize: 10.0,
                      color: textColor,
                    ), // Small font size to fit
                  ),
                  const SizedBox(
                    width: 8.0,
                  ), // Small right padding after the number
                  Expanded(
                    child: Text(
                      'This is a $ordinal container for the Best Long Screenshot app ever',
                      style: TextStyle(
                        fontSize: 10.0,
                        color: textColor,
                      ), // Small font size to fit
                      overflow: TextOverflow
                          .ellipsis, // Handle potential text overflow
                      maxLines: 1, // Ensure text is on a single line
                    ),
                  ),
                ],
              ),
            ),
          );
        },
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Settings',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Theme.of(
          context,
        ).colorScheme.secondary, // Use theme color for selected item
        onTap: _onItemTapped,
      ),
    );
  }
}