Блог

Я пытаюсь реализовать этот дизайн нижней панели навигации с помощью flutter для мобильных устройств, и я не могу понять, что именно я делаю неправильно. Я хочу, чтобы он был равномерно распределен и центрирован. Это дизайнерский образ

Я пробовал разные подходы, но это самый близкий результат к дизайну, который я мог получить

For more context, this is the code I used

 import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:iconly/iconly.dart';  class DashBoardScreen extends StatefulWidget {  const DashBoardScreen({Key? key}) : super(key: key);   @override  _DashBoardScreenState createState() =gt; _DashBoardScreenState(); }  class _DashBoardScreenState extends  Statelt;DashBoardScreengt; {  var currentIndex = 0;  @override  Widget build(BuildContext context) {  Size size = MediaQuery.of(context).size;  return Scaffold(  bottomNavigationBar: Container(  height: size.width * .155,  decoration: BoxDecoration(  color: Colors.white,  ),  child: ListView.builder(  itemCount: 4,  scrollDirection: Axis.horizontal,  padding: EdgeInsets.symmetric(horizontal: size.width * .024),  itemBuilder: (context, index) =gt; InkWell(  onTap: () {  setState(  () {  currentIndex = index;  },  );  },  splashColor: Colors.transparent,  highlightColor: Colors.transparent,  child: Column(  mainAxisAlignment: MainAxisAlignment.spaceBetween,  children: [  AnimatedContainer(  duration: Duration(milliseconds: 1500),  curve: Curves.fastLinearToSlowEaseIn,  margin: EdgeInsets.only(  bottom: index == currentIndex ? 0 : size.width * .029,  right: size.width * .0422,  left: size.width * .0422,  ),  width: size.width * .128,  height: index == currentIndex ? 4 : 0,  decoration: BoxDecoration(  color: Color(0xff25307e),  ),  ),  Icon(  index == currentIndex  ? listOfIconsBold[index]  : listOfIconsLight[index],  size: size.width * .076,  color: index == currentIndex  ? Color(0xff25307e)  : Colors.black38,  ),  Text(  listOfText[index],  style: TextStyle(  fontSize: 12,  fontWeight: FontWeight.w400,  color: index == currentIndex  ? Color(0xff25307e)  : Colors.black38,  ),  ),  ],  ),  ),  ),  ), );  }   Listlt;IconDatagt; listOfIconsLight = [ IconlyLight.category, IconlyLight.chart, IconlyLight.document, IconlyLight.work  ];  Listlt;IconDatagt; listOfIconsBold = [  IconlyBold.category,  IconlyBold.chart,   IconlyBold.document,  IconlyBold.work   ];   Listlt;Stringgt; listOfText = ['Dashboard', 'Analytics', 'My Products', 'Manage'];  }  

Вам не нужно использовать ListView виджет, если вы не хотите, чтобы он был прокручиваемым.

Просто сделайте Row с mainAxisSize: MainAxisSize.max , чтобы он занимал всю ширину и mainAxisAlignment: MainAxisAlignment.spaceEvenly располагал детей в центре/пространстве. Список children: не обязательно должен быть предопределенным. Это также может быть функция, которая возвращает список виджетов (ваши значки и тексты в столбце).

 Row(  mainAxisSize: MainAxisSize.min,  mainAxisAlignment: MainAxisAlignment.spaceEvenly,  children: navItems(), )  ...  Listlt;Widgetgt; navItems() {  Listlt;Widgetgt; w = [];    for (int i = 0; ilt;4; i  ) {  w.add(Column(/*same column as in your code*/));  }    return w; }