Flutter界面构建插件flet的介绍与使用方法

Flutter界面构建插件flet的介绍与使用方法

##Flutter界面构建插件flet介绍

Flet是一个用于向现有的Flutter应用程序添加服务器驱动的用户界面（SDUI）体验或构建独立的Web、移动和桌面应用程序的框架。通过在Flutter应用中添加一个可交互的FletApp小部件，其内容由远程Python脚本控制。

它非常适合用于构建非核心或经常更改的功能，例如产品目录、反馈表单、应用内调查或支持聊天。Flet允许团队更快地发布新功能，减少App Store验证周期。只需重新部署托管Python脚本的Web应用，您的用户就会立即获得更新！

在服务器端，Flet提供了一个易于学习的编程模型，使得没有Flutter（甚至前端）经验的Python开发人员也能参与开发较大的Flutter应用程序，或者从零开始使用Flutter UI构建自己的应用程序。

Flutter界面构建插件flet的使用

安装Flet Python模块

Flet需要Python 3.7或更高版本。要开始使用Flet，首先需要安装flet模块：

pip install flet

创建Python程序

创建一个新的Python程序，该程序将驱动FletApp小部件的内容。

让我们做一个简单的计数器应用，类似于Flutter的新项目模板：

import flet
from flet import IconButton, Page, Row, TextField, icons

def main(page: Page):
    page.title = "Flet计数器示例"
    page.vertical_alignment = "center"

    txt_number = TextField(value="0", text_align="right", width=100)

    def minus_click(e):
        txt_number.value = int(txt_number.value) - 1
        page.update()

    def plus_click(e):
        txt_number.value = int(txt_number.value) + 1
        page.update()

    page.add(
        Row(
            [
                IconButton(icons.REMOVE, on_click=minus_click),
                txt_number,
                IconButton(icons.ADD, on_click=plus_click),
            ],
            alignment="center",
        )
    )

flet.app(target=main, port=8550)

运行应用：

python counter.py

你应该会看到应用在一个原生操作系统窗口中运行。

后台有一个固定端口为8550的Web服务器（Fletd）。Fletd Web服务器是Python和Flutter之间的“桥梁”。

在你的Flutter应用中的FletApp小部件将通过WebSocket与Fletd Web服务器通信，以接收UI更新并发送用户生成的UI事件。

对于生产环境，可以将Python应用连同Fletd一起部署到公共Web主机，并通过HTTPS和域名访问。

将Flet小部件添加到Flutter应用中

创建一个新的或打开现有的Flutter项目。

安装Flutter flet包：

flutter pub add flet

对于新的项目，用以下内容替换main.dart文件：

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

void main() async {
  await setupDesktop();
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flet Flutter示例',
      home: FletApp(pageUrl: "http://localhost:8550"),
    );
  }
}

在上述应用中，FletApp小部件被包含在MaterialApp小部件中。

如果Flet应用必须能够处理页面路由更改事件（Web浏览器URL更改、移动应用深度链接），则它必须是最顶层的小部件，因为它包含自己的MaterialApp小部件来处理路由更改：

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

void main() async {
  await setupDesktop();
  runApp(const FletApp(pageUrl: "http://localhost:8550"));
}