如何使用 Flutter 和 Rails 从头开始​​构建移动应用程序？

Posted 2023-02-23

【中文标题】如何使用 Flutter 和 Rails 从头开始​​构建移动应用程序？

【英文标题】：How to build a mobile app from scratch with Flutter and maybe Rails?

【发布时间】：2019-07-14 07:23:11

【问题描述】：

我是一名 Rails 网络后端和前端开发人员，我想构建一个移动应用程序。一个简单的应用程序，包含产品、用户、地理定位和可能的支付（使用 Stripe 等第三方）。

我觉得 Flutter 框架是个不错的选择，看起来很简单。

但我不知道 Dart 语言（或移动原生开发）的东西如何，也不知道从哪里开始。

我想到了一个类似的系统：

面向产品和用户的 Rails 后端 用于动作和地理定位的 Flutter 框架应用 它们之间用于接收和发送数据的 API

你对我有什么建议吗？从哪里开始，以及替代方案？

非常感谢！

【问题讨论】：

flutter.io/docs/get-started/codelab - 从 Flutter 文档和教程开始

【参考方案1】：

您的问题绝对不应该如此广泛，因为对此没有正确的答案，但我会尝试。几天之内，我仅使用文档就学会了颤振。

我按照文档中的this 学习了设置、安装并编写了我的第一个应用程序。

我通过查看 this website 并阅读有关正在实施的特定架构的更多信息来学习架构。

为了更好地处理布局本身，这非常容易和好处理，我在instagram 上遇到了我的这个旧设计挑战，我每天使用 Flutter 实现一个 UI，持续了几天。大约一周后，我也可以构建任何我想要的布局。

我已决定在较大的应用程序中使用范围模型 as described here 和 redux。真是太棒了。

这就是我使用的所有内容，然后每周我会在 google 的 developer youtube page 上观看本周的小部件，仅此而已。 Flutter 的媒体社区非常活跃，应该是一个很好的信息来源，但我几乎从不阅读那里的博客，除非我需要学习新的东西。

【参考方案2】：

将 Rails API 连接到 Flutter UI 非常简单，有几个关于状态管理的注意事项，但 Google 建议使用 BLoC 模式，它与 Rails 配合得非常好。

现在我不打算详细介绍实现 BLoC 模式的细节，但我会在底部留下一些围绕这个主题的链接。

第一步是检查颤振文档，他们有一些不错的食谱，我将在下面使用 Rails 生成器进行调整。 https://flutter.dev/docs/cookbook/networking/fetch-data

创建帖子资源：

rails g resource post title:string body:string

运行rails db:migrate。 使用 Rails 控制台创建帖子 在您的颤振应用程序 (main.dart) 中，我假设它是一个全新的应用程序：

import 'dart:async';
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

Future<Post> fetchPost() async 
  final response =
      await http.get('http://10.0.2.2:3000/posts/1');

  if (response.statusCode == 200) 
    // If the call to the server was successful, parse the JSON.
    return Post.fromJson(json.decode(response.body));
   else 
    // If that call was not successful, throw an error.
    throw Exception('Failed to load post');
  


class Post 
  final int id;
  final String title;
  final String body;

  Post(this.id, this.title, this.body);

  factory Post.fromJson(Map<String, dynamic> json) 
    return Post(
      id: json['id'],
      title: json['title'],
      body: json['body'],
    );
  


void main() => runApp(MyApp(post: fetchPost()));

class MyApp extends StatelessWidget 
  final Future<Post> post;

  MyApp(Key key, this.post) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Fetch Data Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Fetch Data Example'),
        ),
        body: Center(
          child: FutureBuilder<Post>(
            future: post,
            builder: (context, snapshot) 
              if (snapshot.hasData) 
                return Text(snapshot.data.title);
               else if (snapshot.hasError) 
                return Text("$snapshot.error");
              

              // By default, show a loading spinner.
              return CircularProgressIndicator();
            ,
          ),
        ),
      ),
    );
  

启动在 3000 端口上运行的 rails 服务器 启动颤振应用

真的是这样。 Rails 和 Flutter 完美结合，Flutter Web 即将问世……在某个时候……我真的很兴奋。

其他一些资源： Flutter 和 Rails CLI（仍然是一个 WIP，但可以实现）https://rubygems.org/gems/frap

状态管理： https://www.didierboelens.com/2018/08/reactive-programming---streams---bloc/ https://medium.com/flutterpub/architecting-your-flutter-project-bd04e144a8f1

一堆例子 https://github.com/flutter/samples/blob/master/INDEX.md

【讨论】：

新用户注意事项：flutter团队推荐的状态管理目前是provider packages。