Flutterでタブ使ってみる

フラッターでタブを使ってみたいと思います。

使い方は下記で使っているので見てくださいませ。

https://github.com/iampawan/FlutterWhatsAppClone — github.com

私はこの前つくったこんにちはアプリを、こんにちはタブアプリに進化させました。

https://github.com/edo1z/flutter_study/tree/36e31718130ab2eb675bec5d223dff07718a833b — github.com

f:id:edo1z:20190825000228g:plain

lib/main.dart

import 'package:flutter/material.dart';
import 'package:hoge/home.dart';

void main() => runApp(MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'TEST?',
      theme: ThemeData(
        primaryColor: Colors.blue,
        accentColor: new Color(0xff006699)
      ),
      home: Hello(),
    ));

lib/home.dart

import 'package:flutter/material.dart';
import 'package:hoge/pages/hoge.dart';
import 'package:hoge/pages/hello.dart';

class Hello extends StatefulWidget {
  @override
  _HelloState createState() => _HelloState();
}

class _HelloState extends State<Hello> with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = new TabController(length: 3, vsync: this, initialIndex: 1);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0.7,
        title: Text('こんにちは世界'),
        actions: <Widget>[
          Icon(Icons.search),
          Padding(padding: const EdgeInsets.symmetric(horizontal: 5.0)),
          Icon(Icons.more_vert)
        ],
        bottom: TabBar(
          controller: _tabController,
          indicatorColor: Colors.orange,
          tabs: <Widget>[
            Tab(icon: new Icon(Icons.camera_alt)),
            Tab(text: '一覧'),
            Tab(text: '設定'),
          ]
        )
      ),
      body: TabBarView(
          controller: _tabController,
          children: <Widget>[
            HogeScreen(),
            HelloScreen(),
            HogeScreen(),
          ]
      )
    );
  }
}

lib/pages/hello.dart

import 'package:flutter/material.dart';

class HelloScreen extends StatelessWidget {
  AlertDialog dialog = AlertDialog(
      content: Text(
        'こんにちは',
        style: TextStyle(fontSize: 20.0),
      ));

  @override
  Widget build(BuildContext context) {
    return new Center(
        child: RaisedButton(
            child: Text('PRESS ME!', style: TextStyle(color: Colors.white)),
            color: Colors.blue,
            onPressed: () {
              showDialog(
                  context: context,
                  builder: (BuildContext context) => dialog);
            }));
  }
}

lib/pages/hoge.dart

import 'package:flutter/material.dart';

class HogeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new Text(
        "ほげ",
        style: new TextStyle(fontSize: 40.0),
      ),
    );
  }
}