BottomNavigationBar in combination with TabBar implements a similar headline framework
Source code portal
Source code portal Gitee
rendering

1. Implement the BottomNavigationBar
Tabs.dart
import 'package:flutter/material.dart'; import 'package:newsscaffold/pages/tabs/Ixigua.dart'; import 'package:newsscaffold/pages/tabs/User.dart'; import 'package:newsscaffold/pages/tabs/VideoHall.dart'; import 'tabs/Home.dart'; class Tabs extends StatefulWidget { final index; Tabs({Key key,this.index=0}):super(key:key); @override _TabsState createState() => _TabsState(this.index); } class _TabsState extends State<Tabs> { _TabsState(index){ this._currentIndex=index; } int _currentIndex ; List _pageList = [HomePage(), IxiguaPage(), VideoHallPage(),UserPage()]; @override Widget build(BuildContext context) { return Scaffold( // appBar: AppBar( // // Here we take the value from the MyHomePage object that was created by // // the App.build method, And use it to set our appbar title. // title: Text(" 新 headlines "), //), body: this._pageList[this._currentIndex], bottomNavigationBar: BottomNavigationBar( currentIndex: This._currentindex, // iconSize: 35, // fixedColor: Colors. RedAccent, // BottomNavigationBarType.fixed, onTap: (index) { setState(() { this._currentIndex = index; }); }, items: [BottomNavigationBarItem(icon: icon (Icons. Home), title: Text(" home ")), BottomNavigationBarItem(icon: BottomNavigationBarItem(Icon: Icon(Icons. Play_arrow), BottomNavigationBarItem(Icon: Icon(Icons. Slideshow)), title: BottomNavigationBarItem(icon: icon (Icons. Account_circle), title: Text(" my ")),]), // This trailing comma makes auto-formatting nicer for build methods.); }}Copy the code
Four pages in tabs. dart
2.Home.dart places TabBar in the title of AppBar
import 'package:flutter/material.dart'; class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin{ List<Widget> _tabs = [ Tab( text: "Concern"), the Tab (the text: "recommended",) and Tab (the text: "hot list",), the Tab (the text: "science and technology,"), the Tab (the text: "free novel,"), the Tab (text: "New era",) and Tab (the text: "resistance to disease,"), the Tab (text: "question and answer"), the Tab (the text: "digital",), the Tab (the text: "news,"), the Tab (the text: "video",),]; List<Widget> _tabBars = [Center(child: Text(' care '),), Center(child: Text(' care '),), Center(child: Text(' care '),), Center(child: Text(' care '),), Center(child: Text(' hot '),), Center(child: Text(' tech '),), Center(child: Text(' free '),), Center(child: Text(' free '),), Center(child: Text(' free '),) Text(' new age '),), Center(child: Text(' fight '),), Center(child: Text(' fight '),), Center(child: Text(' fight '),), Center(child: Text(' fight '),), Center(child: Text(' fight '),) The Text (' digital '),), Center (child: Text (' news'),), Center (child: Text (' video),),]; TabController _tabController; controller@override void initState() {super.initState(); _tabController = new TabController(vsync: this, length: this._tabs.length); _tabController.index=1; setState(() { }); . / / listener _tabController addListener () {/ / switch click TAB when performing an animation effects, there is no slide switch, Triggered a Listener in the process, so triggered the addListener method/twice/solve the problem of click the TAB to perform 2 times the if (_tabController. Index = = _tabController. Animation. Value) { Print (_tabController.index); }}); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Colors.white, title: TabBar( controller: this._tabController, indicatorColor: Colors.redAccent, labelColor: Colors. RedAccent, unselectedLabelColor: Colors. Black, isScrollable: true, // And text equal width indicatorSize: TabBarIndicatorSize.label, tabs: this._tabs, ), ), body: TabBarView(children: this._tabBars,controller: this._tabController,), ); }}Copy the code

Ixigua.dart

import 'package:flutter/material.dart'; class IxiguaPage extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Text(' watermelon video '),); }}Copy the code

VideoHall.dart

import 'package:flutter/material.dart'; class VideoHallPage extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Text(' screentime '),); }}Copy the code

User.dart

import 'package:flutter/material.dart';

class UserPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return Center(
    child: Text('我的'),
  );
}
}
Copy the code
Program entrance

main.dart

import 'package:flutter/material.dart'; import 'pages/Tabs.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( // This is the theme of your application. // // Try running your application with "flutter run". You'll see the // application has a blue toolbar. Then, without quitting the app, try // changing the primarySwatch below to Colors.green and then invoke // "hot reload" (press "r" in the console where you ran "flutter run", // or simply save your changes to "hot reload" in a Flutter IDE). // Notice that the counter didn't reset back to zero; the application // is not restarted. primarySwatch: Colors.blue, // This makes the visual density adapt to the platform that you run // the app on. For desktop platforms, the controls will be smaller and // closer together (more dense) than on mobile platforms. visualDensity: VisualDensity.adaptivePlatformDensity, ), debugShowCheckedModeBanner: false, home: Tabs(index: 0,), ); }}Copy the code
Source code portal