Flutter简历模板插件flutter_resume_template的使用

发布于 1周前 作者 wuwangju 来自 Flutter

Flutter简历模板插件flutter_resume_template的使用

flutter_resume_template 插件提供了一个可定制的简历模板，可以轻松集成到Flutter应用程序中。该插件提供了一个 FlutterResumeTemplate 小部件，接受参数如 TemplateMode, TemplateTheme, onSaveResume, TemplateData 和 onEmpty() 来根据需要自定义模板。

特性

  • 多种风格的可定制简历模板。
  • 根据用户需求添加或移除按钮的能力。
  • 易于与现有的Flutter应用集成和定制。

编辑模式特性

特性 描述
拖放 允许用户拖放小部件以在布局内重新定位它们。
缩放 使用户能够放大或缩小布局，以查看更多或更少的小部件。
小部件摇晃 当选择编辑模式时，画布上的小部件会摇晃，表示它们可以被移动或修改。

安装

要在项目中使用此插件，请在项目的 pubspec.yaml 文件中将 flutter_resume_template 添加为依赖项：

dependencies:
  flutter_resume_template: <latest.version>

然后运行以下命令来安装依赖项：

$ flutter packages get

使用方法

要使用 FlutterResumeTemplate 小部件，只需导入 flutter_resume_template 包并创建该小部件的新实例，提供所需的参数即可。

首先，在一个名为 data.dart 的Dart文件中定义你的数据：

const String workExperienceCompany1 = '''
Responsibilities:
  - Developed and maintained RESTful APIs using Node.js and Express.js for our web applications.
  Technologies Used:
  - Node.js, Express.js, GraphQL, RESTful APIs
Achievements:
  - Successfully reduced API response times by 30% by optimizing database queries.
''';

// 更多工作经验...

const String bio = '''
I am a dedicated Flutter developer with four years of valuable experience...
''';

TemplateData data = TemplateData(
    fullName: 'Alicia Smith',
    currentPosition: 'Flutter Developer',
    // 更多属性...
    image: 'https://example.com/image.jpg',
    backgroundImage: 'https://example.com/background.jpg',
);

然后导入 data.dart 并使用它：

import 'package:flutter/material.dart';
import 'package:flutter_resume_template/flutter_resume_template.dart';
import 'data.dart'; // 导入之前创建的数据文件

class MyResumePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Resume'),
      ),
      body: FlutterResumeTemplate(
          data: data,
          templateTheme: TemplateTheme.modern,
          mode: TemplateMode.shakeEditAndSaveMode,
          onSaveResume: (globalKey) async => await PdfHandler().createResume(globalKey),
      ),
    );
  }
}

自定义模板样式

如果想要创建自己的模板样式（比如背景颜色等），你需要定义并传递自己的 ThemeData：

templateTheme: TemplateTheme(
  TemplateType.modernResume, // 设置你想要定制的模板模式
  ThemeData(
    primaryColor: Colors.red,
    // 其他主题属性...
  ),
)

参数说明

参数名 描述
mode 确定模板的不同状态：[TemplateMode.onlyEditableMode], [TemplateMode.shakeEditAndSaveMode], [TemplateMode.readOnlyMode]
TemplateTheme 字符串值，确定模板样式。可用的样式有 business, technical, modern, 和 classic
data 接收简历的所有属性的对象，如经验、地址、姓名、当前职位等，并将在简历上显示
onSaveResume 回调函数，用于保存PDF版本的简历到本地下载路径

更多参数请参考官方文档。

示例代码

完整的示例代码可以在 GitHub 上查看。以下是简化版的例子：

import 'package:flutter/material.dart';
import 'package:flutter_resume_template/flutter_resume_template.dart';
import 'data.dart'; // 假设这是包含数据的文件

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyResumePage(),
    );
  }
}

class MyResumePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Resume")),
      body: FlutterResumeTemplate(
        data: data,
        templateTheme: TemplateTheme.modern,
        mode: TemplateMode.shakeEditAndSaveMode,
        onSaveResume: (key) async {
          // 实现保存逻辑
        },
      ),
    );
  }
}

更多关于Flutter简历模板插件flutter_resume_template的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter简历模板插件flutter_resume_template的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何使用 flutter_resume_template 插件来创建简历模板的示例代码。这个插件假设提供了一个基础的简历结构，你可以根据自己的需求进行定制和扩展。

首先，确保你的 Flutter 项目已经创建并配置好。然后，在 pubspec.yaml 文件中添加 flutter_resume_template 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_resume_template: ^latest_version  # 请替换为实际的最新版本号

然后运行 flutter pub get 来获取依赖。

接下来，在你的 Dart 文件中使用 flutter_resume_template 来构建简历页面。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Resume App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ResumeScreen(),
    );
  }
}

class ResumeScreen extends StatelessWidget {
  final ResumeData resumeData = ResumeData(
    basicInfo: BasicInfo(
      name: 'John Doe',
      phone: '+1234567890',
      email: 'john.doe@example.com',
      linkedin: 'linkedin.com/in/johndoe',
      github: 'github.com/johndoe',
      location: 'New York, NY',
      bio: 'A passionate Flutter developer with 5 years of experience.',
      profilePic: 'assets/profile_pic.png',  // 确保在assets文件夹中有此图片
    ),
    workExperience: [
      WorkExperience(
        company: 'TechCorp',
        position: 'Software Engineer',
        startDate: '2018-01-01',
        endDate: '2021-06-30',
        description: 'Developed and maintained mobile applications using Flutter.',
      ),
      // 可以添加更多工作经历
    ],
    education: [
      Education(
        school: 'University of Tech',
        degree: 'Bachelor of Science in Computer Science',
        startDate: '2014-09-01',
        endDate: '2018-05-31',
      ),
      // 可以添加更多教育经历
    ],
    skills: [
      Skill('Flutter', level: 'Expert'),
      Skill('Dart', level: 'Expert'),
      Skill('React Native', level: 'Intermediate'),
      // 可以添加更多技能
    ],
    projects: [
      Project(
        title: 'Flutter Todo App',
        description: 'A simple todo application built with Flutter.',
        repoLink: 'https://github.com/johndoe/flutter_todo_app',
      ),
      // 可以添加更多项目
    ],
    certifications: [
      Certification(
        title: 'Flutter Developer Certification',
        issuer: 'Google',
        date: '2021-07-01',
      ),
      // 可以添加更多证书
    ],
    languages: [
      Language('English', fluency: 'Fluent'),
      Language('Spanish', fluency: 'Conversational'),
      // 可以添加更多语言
    ],
    interests: [
      Interest('Hiking'),
      Interest('Reading'),
      Interest('Traveling'),
      // 可以添加更多兴趣
    ],
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Resume'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: ResumeTemplate(resumeData: resumeData),
      ),
    );
  }
}

请注意，ResumeData 类及其嵌套类（如 BasicInfo, WorkExperience 等）是假设的，实际使用时你需要参考 flutter_resume_template 插件的文档来构建正确的数据结构。

此外，确保在 assets 文件夹中有一张名为 profile_pic.png 的图片，或者根据你的需求调整图片路径。

这个示例展示了如何使用 flutter_resume_template 插件来创建一个简单的简历页面。你可以根据自己的需求进一步定制和扩展简历的内容。

回到顶部