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

Question

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

Gde*_*rig 4 mobile ruby-on-rails dart flutter

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

我认为 Flutter 框架是一个不错的选择，看起来非常简单。

但是我不知道 Dart 语言（或移动原生开发者）是怎么回事，也不知道从哪里开始。

我想到了一个像这样的系统：

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

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

非常感谢！

Answer 1

小智 6

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

现在我不打算详细讨论实现 BLoC 模式的细节，但我将在底部留下一些围绕该主题的链接。

第一步是检查 flutter 文档，他们有一些不错的 Cookbook，我将使用 Rails 生成器改编下面的一本。https://flutter.dev/docs/cookbook/networking/fetch-data

创建帖子资源：

rails g resource post title:string body:string

Run Code Online (Sandbox Code Playgroud)

跑步rails db:migrate。
使用 Rails 控制台创建帖子
在您的 flutter 应用程序（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();
            },
          ),
        ),
      ),
    );
  }
}

Run Code Online (Sandbox Code Playgroud)