Generated code from pixels2flutter.dev

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,
      theme: ThemeData(
        colorSchemeSeed: Colors.teal,
        useMaterial3: true,
      ),
      home: const OutletListingPage(),
    );
  }
}

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

  @override
  State<OutletListingPage> createState() => _OutletListingPageState();
}

class _OutletListingPageState extends State<OutletListingPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: const BackButton(),
        title: const Text('Outlet Listing - Route...'),
        actions: const [
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 16),
            child: Text(
              'UBO',
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(right: 16),
            child: Icon(Icons.search),
          ),
          Padding(
            padding: EdgeInsets.only(right: 16),
            child: Icon(Icons.person),
          ),
          Padding(
            padding: EdgeInsets.only(right: 16),
            child: Icon(Icons.location_on),
          ),
        ],
      ),
      body: DefaultTabController(
        length: 2,
        child: Column(
          children: [
            const TabBar(
              tabs: [
                Tab(text: '正在等待(12)'),
                Tab(text: '不完整(00)'),
              ],
            ),
            Expanded(
              child: TabBarView(
                children: [
                  ListView(
                    children: const [
                      OutletCard(
                        customerName: '客户1',
                        location: 'Chennai 1',
                        id: 'HCL230001',
                        channel: 'General Tra...',
                        group: 'Direct - Dru...',
                        subChannel: 'General...',
                        classType: 'Class A',
                      ),
                      OutletCard(
                        customerName: '客户10',
                        location: 'Chennai 1',
                        id: 'HCL230010',
                        channel: 'OAH',
                        group: 'Direct - Priv...',
                        subChannel: 'OAH',
                        classType: 'Class A',
                      ),
                      OutletCard(
                        customerName: '客户11',
                        location: 'Chennai 1',
                        id: 'HCL230011',
                        channel: 'OAH',
                        group: 'Direct - Priv...',
                        subChannel: 'OAH',
                        classType: 'Class B',
                      ),
                      OutletCard(
                        customerName: '客户12',
                        location: 'Chennai 1',
                        id: 'HCL230012',
                        channel: '',
                        group: '',
                        subChannel: '',
                        classType: '',
                      ),
                    ],
                  ),
                  const Center(child: Text('No incomplete items')),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class OutletCard extends StatelessWidget {
  const OutletCard({
    super.key,
    required this.customerName,
    required this.location,
    required this.id,
    required this.channel,
    required this.group,
    required this.subChannel,
    required this.classType,
  });

  final String customerName;
  final String location;
  final String id;
  final String channel;
  final String group;
  final String subChannel;
  final String classType;

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: const EdgeInsets.all(8),
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: [
                    const CircleAvatar(
                      backgroundColor: Colors.teal,
                      child: Icon(Icons.store, color: Colors.white),
                    ),
                    const SizedBox(width: 8),
                    Text(
                      customerName,
                      style: const TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ],
                ),
                const Icon(Icons.edit),
              ],
            ),
            Text(location),
            Text(id),
            const SizedBox(height: 16),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text('渠道'),
                    Text(channel),
                    const Text('团体'),
                    Text(group),
                    const Text('子 - 通道'),
                    Text(subChannel),
                    const Text('班级'),
                    Text(classType),
                  ],
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: const [
                    Text('TGT'),
                    Text('顶点'),
                    Text('牛奶'),
                  ],
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: const [
                    Text('₹ 0'),
                    Text('₹ 0'),
                    Text('₹ 0'),
                  ],
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: const [
                    Text('AVGL3M'),
                    Text('戈夫'),
                    Text('产品'),
                  ],
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: const [
                    Text('₹ 0'),
                    Text('0'),
                    Text('0'),
                  ],
                ),
              ],
            ),
            const SizedBox(height: 16),
            Row(
              children: [
                const Icon(Icons.shield),
                const SizedBox(width: 8),
                const Icon(Icons.location_on, color: Colors.red),
                const SizedBox(width: 8),
                const CircleAvatar(
                  radius: 8,
                  backgroundColor: Colors.red,
                ),
                const Spacer(),
                TextButton(
                  onPressed: () {},
                  child: const Text(
                    'OTP-不是VER',
                    style: TextStyle(color: Colors.red),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}