美文网首页
Flutter Example Tab Bar

Flutter Example Tab Bar

作者: 三只仓鼠 | 来源:发表于2018-11-20 18:13 被阅读0次
import 'package:flutter/material.dart';
import 'tabs/first.dart';
import 'tabs/second.dart';
import 'tabs/third.dart';

void main() => runApp(new MaterialApp(title: "Using Tabs", home: new MyHome()));

class MyHome extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyHomeState();
}

class MyHomeState extends State<MyHome> with SingleTickerProviderStateMixin {
  TabController controller;
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Center(
          child: new Text("Using Tabs"),
        ),
        backgroundColor: Colors.blue,
        bottom: getTabBar(),
      ),
      body: getTabBarView(<Widget>[new first(), new second(), new third()]),
    );
  }

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

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  TabBar getTabBar() {
    return new TabBar(
      tabs: <Widget>[
        new Tab(
          icon: new Icon(Icons.favorite),
        ),
        new Tab(
          icon: new Icon(Icons.adb),
        ),
        new Tab(
          icon: new Icon(Icons.airport_shuttle),
        ),
      ],
      controller: controller,
    );
  }

  TabBarView getTabBarView(var tabs) {
    return new TabBarView(
      children: tabs,
      controller: controller,
    );
  }
}

import 'package:flutter/material.dart';

class first extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Icon(Icons.favorite, size: 160.0, color: Colors.red),
            new Text("First Tab")
          ],
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

class second extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Icon(Icons.adb, size: 160.0, color: Colors.green),
            new Text("Second Tab")
          ],
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

class third extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Icon(Icons.airport_shuttle, size: 160.0, color: Colors.blue),
            new Text("Third Tab")
          ],
        ),
      ),
    );
  }
}

相关文章

网友评论

      本文标题:Flutter Example Tab Bar

      本文链接:https://www.haomeiwen.com/subject/dmwxqqtx.html