#flutter #dart #flutter-layout #flutter-animation
Вопрос:
Я пытаюсь реализовать этот дизайн нижней панели навигации с помощью 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']; }
Ответ №1:
Вам не нужно использовать 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; }