flutter制作具有自定义导航栏的渐进式 Web 应用程序

class NavBar extends StatefulWidget {

@override

_NavBarState createState() => _NavBarState();

}

class _NavBarState extends State {

List selected = [true, false, false, false, false];

void select(int n) {

for (int i = 0; i < 5; i++) {

if (i != n) {

selected[i] = false;

} else {

selected[i] = true;

}

}

}

@override

Widget build(BuildContext context) {

return Container(

height: 350.0,

child: Column(

children: [

NavBarItem(

icon: Feather.home,

active: selected[0],

touched: () {

setState(() {

select(0);

});

},

),

NavBarItem(

icon: Feather.list,

active: selected[1],

touched: () {

setState(() {

select(1);

});

},

),

NavBarItem(

icon: Feather.folder,

active: selected[2],

touched: () {

setState(() {

select(2);

});

},

),

NavBarItem(

icon: Feather.message_square,

active: selected[3],

touched: () {

setState(() {

select(3);

});

},

),

NavBarItem(

icon: Feather.settings,

active: selected[4],

touched: () {

setState(() {

select(4);

});

},

),

],

),

);

}

}

正如我们在上面的程序中看到的，我们可以假设，这些是按钮，所以我们可以使用 - “InkWell” - 小部件，它具有 Ontap() 函数，它被包裹着 - “材料”小部件，并取消材料小部件的默认颜色我们手动使颜色透明。当构造函数获得活动的 bool 变量值时，我们可以使用它来为主体 - “AnimatedContainer”设置动画，就像我在下面的代码中所做的那样。

NavigationBar/src/NavBarItems.dart

import ‘package:flutter/material.dart’;

class NavBarItem extends StatefulWidget {

final IconData icon;

final Function touched;

final bool active;

NavBarItem({

this.icon,

this.touched,

this.active,

});

@override

_NavBarItemState createState() => _NavBarItemState();

}

class _NavBarItemState extends State {

@override

Widget build(BuildContext context) {

return Material(

color: Colors.transparent,

child: InkWell(

onTap: () {

print(widget.icon);

widget.touched();

},

splashColor: Colors.white,

hoverColor: Colors.white12,

child: Container(

padding: EdgeInsets.symmetric(vertical: 3.0),

child: Row(

children: [

Container(

height: 60.0,

width: 80.0,

child: Row(

children: [

AnimatedContainer(

duration: Duration(milliseconds: 475),

height: 35.0,

width: 5.0,

decoration: BoxDecoration(

color: widget.active ? Colors.white : Colors.transparent,

borderRadius: BorderRadius.only(

topRight: Radius.circular(10.0),

bottomRight: Radius.circular(10.0),

),

),

),

Padding(

padding: EdgeInsets.only(left: 30.0),

child: Icon(

widget.icon,

color: widget.active ? Colors.white : Colors.white54,

size: 19.0,

),

),

],

),

),

],

),

),

),

);

}

}

让我们留意 - “仪表板”

========================================================================

此状态窗口小部件可帮助您维护宽高比，并充当标签，SharedFilesItem，ProjectStatisticScards的驱动程序小部件。

Dashboard/Dashboard.dart

import ‘package:flutter/material.dart’;

import ‘package:flutter_vector_icons/flutter_vector_icons.dart’;

import ‘package:google_fonts/google_fonts.dart’;

import ‘package:percent_indicator/circular_percent_indicator.dart’;

import ‘package:praum_project_web_app/Dashboard/src/ProjectProgressCard.dart’;

import ‘package:praum_project_web_app/Dashboard/src/ProjectStatisticsCards.dart’;

import ‘package:praum_project_web_app/Dashboard/src/SharedFilesItem.dart’;

import ‘package:praum_project_web_app/Dashboard/src/SubHeader.dart’;

import ‘package:praum_project_web_app/Dashboard/src/Tabs.dart’;

class DashBoard extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Positioned(

left: 100.0,

child: Container(

height: MediaQuery.of(context).size.height,

width: MediaQuery.of(context).size.width * 0.63,

color: Colors.white,

child: Column(

crossAxisAlignment: CrossAxisAlignment.start,

children: [

Container(

margin: EdgeInsets.only(left: 30.0, top: 25.0, bottom: 10.0),

child: Text(

‘Ongoing Projects’,

style: GoogleFonts.quicksand(

fontWeight: FontWeight.bold,

fontSize: 20.0,

),

),

),

Tabs(),

Container(

margin: EdgeInsets.only(top: 5.0),

height: 200.0,

width: MediaQuery.of(context).size.width * 0.62,

child: Row(

mainAxisAlignment: MainAxisAlignment.spaceEvenly,

crossAxisAlignment: CrossAxisAlignment.center,