今回はFlutterでTwitterのViewを作成してみます。

なおこの記事は有料にさせていただきます。
もしご興味いただけたら購入の方よろしくお願いします。

なお、このチュートリアルでわからないことなどがあればTwitterの方からご連絡お願いいたします。

過去にこんな記事を書いております。こちらは無料ですのでこちらもどうぞ

完成品

完成品はこちらになります。

目次
・前提
・プロジェクト作成
・下タブ作成
・レイアウトの切り替え
・タイムラインを作る
・KeyWord画面を作成する
・通知画面を作成する
・メッセージ画面を作成する
・キーワードのときだけアクションバーを切り替える
・宣伝

前提

前提としてFlutterの開発環境を作成しておきましょう。

上の記事は英語ですが、頑張って読んでいただいて環境構築していただけたらと思います。

サーバーサイドの開発環境を作るより圧倒的に楽です。

プロジェクトの作成

プロジェクトを作成したら、色々コメントが書かれたプログラムが書かれていますが無駄なので今回は消してしまいましょう。

画面の真ん中に「Hello World」って表示します。

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primaryColor: Colors.white
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("ホーム"),
      ),
      body: new Center(
        child: Text("Hello World"),
      ),
    );
  }
}

下タブの実装

次に下タブを実装します。