見出し画像

FlutterでTwitterクローンを作る

今回は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"),
      ),
    );
  }
}

下タブの実装

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

この続きをみるには

この続き:25,710文字/画像12枚
記事を購入する

FlutterでTwitterクローンを作る

shogo yamada

300円

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

投げ銭はいりません。それより無料でできる拡散をしてください!! 感想をツイートしていただけることが一番嬉しいです!!

スキありがとうございます!!同時に拡散もお願いします!!
18
SNSサービスを開発しています。サービスの開発記録をnoteに投稿していきます。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。