当前位置：首页 > 谈天说地

Flutter自定义底部导航栏的方法

34资源网2022-07-29546

本文实例为大家分享了flutter自定义底部导航栏的具体代码，供大家参考，具体内容如下

文件结构：

main.dart

import 'package:flutter/material.dart';
import 'pages/tabs.dart';
 
void main() => runapp(new myapp());
 
class myapp extends statelesswidget {
  @override
  widget build(buildcontext context) {
    return materialapp(
      home: tabs(),
    );
  }
}

tabs.dart

import 'package:flutter/material.dart';
import 'tabs/home.dart';
import 'tabs/category.dart';
import 'tabs/user.dart';
class tabs extends statefulwidget {
  tabs({key key}) : super(key: key);
  @override
  _tabsstate createstate() => _tabsstate();
}
 
class _tabsstate extends state<tabs> {
  int _currentindex = 0;
 
  list _pagelist=[
    homepage(),
    categorypage(),
    userpage(),
  ];
 
 
  @override
  widget build(buildcontext context) {
    return scaffold(
      appbar: appbar(
        title: text('自定义底部导航'),
      ),
      body: this._pagelist[this._currentindex],
      bottomnavigationbar: bottomnavigationbar(
        currentindex: this._currentindex,
        ontap: (int index) {
          setstate(() {
            this._currentindex = index;
          });
        },
        items: [
          bottomnavigationbaritem(
            icon: icon(icons.home),
            title: text('首页'),
          ),
          bottomnavigationbaritem(
            icon: icon(icons.category),
            title: text('分类'),
          ),
          bottomnavigationbaritem(
            icon: icon(icons.supervised_user_circle),
            title: text('会员'),
          ),
        ],
      ),
    );
  }
}

home.dart

import 'package:flutter/material.dart';
 
class homepage extends statefulwidget {
  homepage({key key}) : super(key: key);
 
  @override
  _homepagestate createstate() => _homepagestate();
}
 
class _homepagestate extends state<homepage> {
  @override
  widget build(buildcontext context) {
    return text('首页');
  }
}

category.dart

import 'package:flutter/material.dart';
 
class categorypage extends statefulwidget {
  categorypage({key key}) : super(key: key);
 
  @override
  _categorypagestate createstate() => _categorypagestate();
}
 
class _categorypagestate extends state<categorypage> {
  @override
  widget build(buildcontext context) {
    return text('分类');
  }
}

user.dart

import 'package:flutter/material.dart';
 
class userpage extends statefulwidget {
  userpage({key key}) : super(key: key);
 
  @override
  _userpagestate createstate() => _userpagestate();
}
 
class _userpagestate extends state<userpage> {
  @override
  widget build(buildcontext context) {
    return text('会员');
  }
}

效果展示：