用Flutter和Go建立图像生成器教程

前端小工
519 阅读5分钟

简介

Golang是当今发展最快的编程语言之一。它由谷歌开发，据说和C语言一样快，但有Python的简单性。

另一方面，Flutter是一个Dart框架，允许你建立跨平台的移动应用程序。用Flutter编写的应用程序可以在安卓、iOS、网络上运行，最近也可以在桌面上运行。在这篇文章中，我们将看看如何建立一个从Golang后端读取数据的Flutter应用程序。

前提条件

要跟上这篇文章，这里有一些你需要安装的东西。

  • Flutter - 这是我们选择的移动框架
  • Golang - 我们将使用Go作为我们的后端。
  • Heroku - 我们将在Heroku上托管我们的应用程序，所以你需要创建一个账户。请确保同时安装Heroku CLI。
  • 对Flutter和Go的了解 - 这不是一个初学者的教程，所以你需要对如何在Flutter和Golang中编码有一定的了解。

为什么是Flutter和Golang？

Flutter使我们能够建立跨平台的应用程序，用同一个代码库在移动、网络和桌面上运行。

现在，让我们来看看Golang如此受欢迎的一些原因，以及为什么你可能想在你的下一个项目中使用它。

  • 它是一种易于快速学习的语言
  • Golang适用于构建微服务
  • Golang有一个活跃的开发者社区
  • Golang编译成一个单一的二进制文件，可以在任何环境下运行
  • 由于Go被编译为机器码，它的性能自然会优于解释型语言或虚拟运行时间。

构建后端

这个应用程序的后端是非常简单的。我们只有一个端点，根据路径返回一个随机图像。为了生成随机图像，我们将使用一个名为cameron 的库。

在你的项目根目录下创建一个后台文件夹，在server.go 文件中，添加以下代码。

package main

import (
   "bytes"
   "fmt"
   "image/png"
   "log"
   "net/http"
   "os"

   "github.com/aofei/cameron"
)

func main() {
   port := os.Getenv("PORT")
   if port == "" {
       port = "3000"
   }
   log.Println("Starting server on port", port)
   log.Fatalln(http.ListenAndServe(fmt.Sprintf(":%v", port), http.HandlerFunc(identicon)))
}

func identicon(rw http.ResponseWriter, req *http.Request) {
   buf := bytes.Buffer{}
   png.Encode(&buf, cameron.Identicon([]byte(req.RequestURI), 540, 60))
   rw.Header().Set("Content-Type", "image/png")
   buf.WriteTo(rw)
}

我们一开始就导入我们需要的包，包括cameron 包。在我们的主方法中，我们从环境变量中获取应用程序的端口，如果没有设置，我们将端口设置为3000 。

然后我们调用http.ListenAndServe 函数，并传递一个处理程序，在每次终端被击中时调用identicon 函数。identicon 函数接收HTTP请求和响应，并使用cameron 库从请求的路径中生成一个随机图像。

现在，运行go mod init go-flutter 命令来初始化当前目录下的Go模块。接下来，运行go mod tidy 来安装我们应用程序所依赖的所有软件包。最后，运行命令go run server.go 来启动 Golang 服务器。

Start Up The Golang Server

导航到 [http://localhost:3000](http://localhost:3000)来查看该应用程序。你应该看到一个随机生成的图像。

Random Image Generated

在将我们的应用程序连接到后端之前，我们需要在网上公开托管它。创建一个名为Procfile 的文件，并添加这个。

Create Procfile

现在将后端文件提交到git，通过运行heroku login ，登录到Heroku，并运行Heroku create <app_name> ，创建一个新的应用程序。

Create New App

导航到Heroku仪表板查看你的应用程序，并按照部署标签上的说明部署应用程序。

Deploy App On Heroku Dashboard

点击Open app ，在浏览器中查看该应用。

构建Flutter应用程序

好了，现在后端已经部署完毕，让我们来构建Flutter应用程序。在你的项目根目录下，运行命令flutter create <app_name> ，创建一个新的Flutter应用程序。把main.dart 文件中的代码替换成这样。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
 const MyApp({Key? key}) : super(key: key);

 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     title: 'Flutter Demo',
     theme: ThemeData(
       primarySwatch: Colors.blue,
     ),
     home: const MyHomePage(title: 'Image Generator'),
   );
 }
}

class MyHomePage extends StatefulWidget {
 const MyHomePage({Key? key, required this.title}) : super(key: key);

 final String title;

 @override
 State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 final TextEditingController _formController = TextEditingController();
 String _text = "";

 void _changeSeed() {
   setState(() {
     _text = _formController.text;
   });
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text(widget.title),
     ),
     body: SingleChildScrollView(
       child: Padding(
         padding: const EdgeInsets.all(8.0),
         child: Center(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: <Widget>[
               const Padding(
                 padding: EdgeInsets.all(8.0),
                 child: Text(
                   'Enter a seed text',
                 ),
               ),
               TextFormField(
                 decoration: InputDecoration(
                     border: OutlineInputBorder(
                         borderRadius: BorderRadius.circular(10))),
                 controller: _formController,
               ),
               Container(
                 margin: const EdgeInsets.all(40.0),
                 width: 540,
                 height: 540,
                 decoration: BoxDecoration(
                     image: DecorationImage(
                         image: NetworkImage(
                             "https://<your_app_name>.herokuapp.com/" + _text))),
               )
             ],
           ),
         ),
       ),
     ),
     floatingActionButton: FloatingActionButton(
       onPressed: _changeSeed,
       tooltip: 'Refresh',
       child: const Icon(Icons.refresh),
     ), // This trailing comma makes auto-formatting nicer for build methods.
   );
 }
}

首先，我们调用runApp 方法来启动Flutter应用程序并传入MyApp widget。在HomePage widget中，我们创建一个函数来改变我们从input widget中得到的文本。然后，我们返回一个Scaffold widget，里面有我们在应用程序中使用的文本字段、图像容器和浮动动作按钮。

请确保将 [https://.herokuapp.com](https://.herokuapp.com)替换为Golang后台的URL。现在启动你的安卓模拟器，运行flutter run ，在模拟器中构建和安装应用程序。

Run Flutter Command In Android Emulator

在输入字段中输入一个文本，并点击刷新按钮来生成一个新的图像。

总结

在这篇文章中，我们看了如何建立一个连接到Golang后台的Flutter应用程序，同时讨论了为什么我们应该使用Golang和Flutter的一些原因。

虽然Golang是一种相对较新的语言，但多年来它已经获得了很大的知名度，并迅速成为构建Web后端的首选工具。Flutter也是一个用于构建跨平台网络应用的工具。把这两者放在一起，你就有了一个强大的组合。

avatar
文章
阅读
粉丝