Flutter自定义UI组件插件cramr_ui_lib的使用

Flutter自定义UI组件插件cramr_ui_lib的使用

cramr_ui_lib 是一个用于帮助记忆学习的UI库。该库提供了自动化动词变位的功能。

功能特点

• 自动化动词变位：自动处理动词的不同时态和语态的变化。

入门指南

此项目是一个Dart包的起点，可以轻松地在多个Flutter或Dart项目中共享库模块。

要开始使用Flutter，可以查看我们的在线文档，其中包含教程、示例、移动开发指南以及完整的API参考。

示例代码

以下是如何在Flutter应用中使用cramr_ui_lib的一些代码片段：

import 'package:flutter/material.dart';
import 'package:cramr_ui_lib/cramr_ui_lib.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '你的应用标题',
      home: MyAppHomePage(title: "我的应用"),
      routes: {
        '/verbSelectionRoute': (context) => VerbSelectionRoute(),
        '/verbIndicativeStudyRoute': (context) => VerbIndicativeStudyRoute(),
        '/verbIndicativeTestRoute': (context) => VerbIndicativeTestRoute(),
        '/verbEvaluateRoute': (context) => VerbIndicativeEvaluateRoute(),
      },
    );
  }
}

class MyAppHomePage extends StatelessWidget {
  final String title;

  MyAppHomePage({required this.title});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text('欢迎使用 $title'),
      ),
    );
  }
}

运行效果

运行上述代码后，你会看到一个简单的Flutter应用启动页面，包含一个标题为"My App"的应用。在底部导航栏中，你可以选择不同的路由来访问不同的页面，如动词选择页面、动词时态学习页面、动词时态测试页面和动词评估页面。

完整示例Demo

以下是完整的示例Demo，包含了所有必要的文件结构和代码：

- lib/
  - main.dart
  - my_app_home_page.dart
  - verb_selection_route.dart
  - verb_indicative_study_route.dart
  - verb_indicative_test_route.dart
  - verb_indicative_evaluate_route.dart

main.dart

import 'package:flutter/material.dart';
import 'package:cramr_ui_lib/cramr_ui_lib.dart';
import 'my_app_home_page.dart';

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

my_app_home_page.dart

import 'package:flutter/material.dart';

class MyAppHomePage extends StatelessWidget {
  final String title;

  MyAppHomePage({required this.title});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text('欢迎使用 $title'),
      ),
    );
  }
}

verb_selection_route.dart

import 'package:flutter/material.dart';

class VerbSelectionRoute extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("动词选择"),
      ),
      body: Center(
        child: Text("这里是动词选择页面"),
      ),
    );
  }
}

verb_indicative_study_route.dart

import 'package:flutter/material.dart';

class VerbIndicativeStudyRoute extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("动词时态学习"),
      ),
      body: Center(
        child: Text("这里是动词时态学习页面"),
      ),
    );
  }
}

verb_indicative_test_route.dart

import 'package:flutter/material.dart';

class VerbIndicativeTestRoute extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("动词时态测试"),
      ),
      body: Center(
        child: Text("这里是动词时态测试页面"),
      ),
    );
  }
}

verb_indicative_evaluate_route.dart

import 'package:flutter/material.dart';

class VerbIndicativeEvaluateRoute extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("动词评估"),
      ),
      body: Center(
        child: Text("这里是动词评估页面"),
      ),
    );
  }
}