How to build a mobile app from scratch with Flutter and maybe Rails?

Question

I'm a Rails web back & front dev, and I want to build a Mobile app. A simple app, with products, users, geolocalisation and maybe payment (with a third-part like Stripe).

I think Flutter framework is a good choice, looks verry simple.

But I don't know how a thing of the Dart language (or mobile native dev), and don't know where to start.

I thought of a system like :

• Rails back-end for products and users
• Flutter framework app for actions and geolocalisation
• API between them to receive and send data

Do you have some advices for me ? Where to start, and alternatives ?

Many thanks !

Answer 1

Your question should should definitely not be so broad since there's no right answer to this but I'll try. I learned flutter in a a few days using the documentation only.

I learned the setup, installation and wrote my first app following this which is in the docs.

I learned architecture through looking at this website and just reading more about the particular architecture that's being implemented.

To get better at the layouts itself, which is super easy and nice to deal with, I had this old design challenge of mine on instagram and I implemented one UI every day for a few days using flutter. After about a week I could build any layout I wanted too.

I've settled on using scoped model as described here and redux in larger apps. It's pretty awesome.

This is all I used, then weekly I would watch the widget of the week on google's developer youtube page and that's it. Flutter's medium community is very active and should be a good source of info, but I almost never read blogs on there unless I need to learn something new.

Answer 2

It's pretty simple to connect a Rails API to a Flutter UI, there are a couple of considerations around state management but Google recommend using the BLoC pattern and it works really well with Rails.

Now I'm not going to go into the details around implementing the BLoC pattern but I will leave some links at the bottom around this topic.

First step is to check the flutter docs, they have some decent Cookbooks and I will adapt one below using Rails generators. https://flutter.dev/docs/cookbook/networking/fetch-data

1. Create a Post resource:

rails g resource post title:string body:string

2. Run rails db:migrate.
3. Create a post using a rails console
4. In your flutter app (main.dart) I'm assuming it's a brand new app here:

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();
            },
          ),
        ),
      ),
    );
  }
}

5. start a rails server running on port 3000
6. start the flutter app

That's about it really. Rails and Flutter are absolutely wonderful together and with Flutter Web coming out... at some point... I'm really excited.

Some other resources: Flutter and Rails CLI (Still very much a WIP but getting there) https://rubygems.org/gems/frap

State management: https://www.didierboelens.com/2018/08/reactive-programming---streams---bloc/ https://medium.com/flutterpub/architecting-your-flutter-project-bd04e144a8f1

A bunch of examples https://github.com/flutter/samples/blob/master/INDEX.md