【Flutter实战静态页面】--在线点餐app（6）底部导航栏bottomNavigationBar

原路指南

【Flutter】在线点餐APP_哔哩哔哩_bilibili

文章只作为初学者学习记录

---

//----------------------------------------------------

//**把Container-->Extract Widget"BottomNavBar"*/

//**把class BottomNavBar放入bottom_nav_bar.dart.dart文件中 */

 

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

class BottomNavBar extends StatelessWidget {
  const BottomNavBar({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      //**装饰容器 */
      padding: EdgeInsets.symmetric(horizontal: 35),
      height: 75,
      width: double.infinity,
      // double.infinity means it cove the available width
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(20),
          topRight: Radius.circular(20),
        ),
        boxShadow: [
          BoxShadow(
            offset: Offset(0, -7),
            blurRadius: 33,
            color: Color(0xFF6DAED9).withOpacity(0.11),
          ),
        ],
      ),
      /**子组件 */
      child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,//将主轴空白位置进行均分，排列子元素，
      children: <Widget>[
        IconButton(
          icon: SvgPicture.asset("assets/icons/home.svg"),
          onPressed: () {},
        ),
        IconButton(
          icon: SvgPicture.asset("assets/icons/Following.svg"),
          onPressed: () {},
        ),
        IconButton(
          icon: SvgPicture.asset("assets/icons/Glyph.svg"),
          onPressed: () {},
        ),
        IconButton(
          icon: SvgPicture.asset("assets/icons/person.svg"),
          onPressed: () {},
        ),
      ],
    ),
    );
  }
}