gomix_flutter/lib/mixing_tab.dart

import 'package:flutter/material.dart';
import 'package:gomix_flutter/mixing_card.dart';

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

  @override
  State<MixingTab> createState() => _MixingTabState();
}

class _MixingTabState extends State<MixingTab> {
  @override
  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;
    int cols = screenWidth > 550 ? 2 : 1;
    int cardHeight = 110;

    return SizedBox.expand(
      child: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text("Inputs", style: Theme.of(context).textTheme.titleLarge),
              const SizedBox(height: 10),
              GridView.count(
                shrinkWrap: true,
                childAspectRatio:
                    (screenWidth - 32 - (10 * (cols - 1))) / cardHeight / cols,
                crossAxisCount: cols,
                mainAxisSpacing: 10,
                crossAxisSpacing: 10,
                children: List<Widget>.generate(
                    6, (i) => MixingCard(name: "Port ${i.toString()}")),
              ),
            ],
          ),
        ),
      ),
    );
  }
}