ten 0.0.12

A set of Flutter component libraries based on UX-first principles

example/lib/main.dart

import 'package:example/conponents/tag.dart';
import 'package:flutter/material.dart';
import 'package:ten/ten.dart';

import 'conponents/index.dart';

void main() {
  runApp(MaterialApp(
    theme: ThemeData.light().copyWith(
      scaffoldBackgroundColor: Colors.white,
      colorScheme: tenLightColorScheme,
    ),
    darkTheme: ThemeData.dark().copyWith(
      scaffoldBackgroundColor: Colors.black,
      colorScheme: tenDarkColorScheme,
    ),
    themeMode: ThemeMode.system,
    home: const MainApp(),
  ));
}

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

  static List<ExampleItem> list = [
    ExampleItem(title: "基础", subItem: [
      ExampleSubItem("Button 通用按钮", const ExampleButton()),
      ExampleSubItem("Appbar 导航栏", const ExampleAppBar()),
      ExampleSubItem("Avatar 头像", const ExampleAvatar()),
      ExampleSubItem("Input 输入框", const ExampleInput()),
      ExampleSubItem("Tag 标签", const ExampleTag()),
      ExampleSubItem("TabBar 标签页", const ExampleTabs()),
    ]),
    ExampleItem(title: "非组件", subItem: [
      ExampleSubItem("Feedback 交互", const ExampleFeedBack()),
      ExampleSubItem("Extensions 扩展", const ExampleExtansion()),
    ]),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: ListView.builder(
        itemBuilder: (context, index) {
          ExampleItem item = list[index];
          return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(item.title, style: TenTextStyles.h2).paddingOnly(left: 16,top: 32,bottom: 4),
              Column(
                  children: item.subItem.map((subElement) {
                return ListTile(
                    onTap: () => Navigator.of(context).push(
                          MaterialPageRoute(
                            builder: (context) => subElement.page,
                          ),
                        ),
                    title: Text(subElement.name),
                    trailing: const Icon(Icons.navigate_next_rounded));
              }).toList()),
            ],
          );
        },
        itemCount: list.length,
      )),
    );
  }
}