Вопрос создания виджетов — Оператор 18 на vc.ru

Всем доброго дня!

Меня зовут Алексей, я основатель и разработчик системы автоматизации работы управляющих компаний «Оператор 18».

Я написал ее с использованием языка Dart и фреймворка Flutter, что позволило мне использовать единую кодовую базу сразу для веб приложения и мобильных платформ iOS и Android.

Как то я уже писал статью об Операторе18. Но тогда это была первая версия проекта, я собирал мнения, пробовал оценить рынок, выбрать вариант монетизации и т. д.

Сейчас я занимаюсь тем что называется — переписыванием проекта с нуля. Хочу, учитывая ошибки прошлого, переписать код, применить архитектуру, структурировать проект лучше. В общем вложиться в развитие на будущее.

В этой и последующих статьях, я хочу поделиться своим опытом о том, с какими сложностями сталкиваюсь при переписывании с нуля и как решаю их. Хорошо если кто нибудь найдёт в моих статьях что-то полезное для себя.

И так, первая версия проекта есть, но выглядит так себе. Точнее сказать — нет какого то дизайна, собирал интерфейс из штатных виджетов, максимум меняя цвет и размер шрифта. В общем — не заморачивался особо. Архитектуры тоже нет, но об этом в следующих статьях.

Для второй версии я решил заказать дизайн.

У меня не было особых пожеланий или требований. Мне хотелось видеть простой и лаконичный дизайн, функциональный, если можно так сказать.

Но, как известно, дизайн — это создание виджетов, нестандартных, кастомных. И на этом моменте я оказался перед выбором: писать свои виджеты или искать что-то работающее с нужным мне функционалом в пабе.

Изначально я был уверен что буду сам писать виджеты, прямо с нуля. Я считал что не стоит держать в проекте много сторонних зависимостей! Можешь если сам написать что-то — пиши!

Вот, например, окно входа в систему в новом дизайне выглядит так:

И я, решив прислушаться к себе, не стал искать готовых решений, а написал свой виджет:

class LoginDropdown extends StatefulWidget { final Function(String) onUserRoleChanged; const LoginDropdown({ required this.onUserRoleChanged, }); @override State<LoginDropdown> createState() => _LoginDropdownState(); } class _LoginDropdownState extends State<LoginDropdown> { bool isShowMenu = false; String currentRole = UserRole.mcOperator; Color roleDropdownButtonColor = AppColors.gray_3; @override Widget build( BuildContext context, ) => MouseRegion( onEnter: (_) => setState(() => roleDropdownButtonColor = AppColors.gray_1), onExit: (_) => setState(() => roleDropdownButtonColor = AppColors.gray_3), child: GestureDetector( onTap: () { setState(() { // ignore: avoid_bool_literals_in_conditional_expressions isShowMenu = isShowMenu ? false : true; }); }, child: Stack( children: [ Container( height: 56, width: 418, decoration: BoxDecoration( color: roleDropdownButtonColor, borderRadius: const BorderRadius.all( Radius.circular(12), ), ), child: Padding( padding: const EdgeInsets.only( left: 20, right: 20, ), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( currentRole, style: AppFonsts.dropDown_1, ), Image.asset( 'icons/dropdown_arrow.png', height: 20, width: 20, ), ], ), ), ), if (isShowMenu) Padding( // 56 - is height of first container, // 8 - is constraint between containers padding: const EdgeInsets.only(top: 56 + 8), child: Container( height: 166, width: 418, decoration: const BoxDecoration( boxShadow: [ // BoxShadow setup found here: // https://devsheet.com/code-snippet/add-box-shadow-to-container-in-flutter/ BoxShadow( color: AppColors.gray_6, blurRadius: 90, offset: Offset(0, 20), ) ], color: AppColors.white, borderRadius: BorderRadius.all( Radius.circular(12), ), ), child: Padding( padding: const EdgeInsets.symmetric(vertical: 14), child: Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.start, children: [ for (var role in UserRole.list) LoginDropdownItem( onTap: () { setState(() { isShowMenu = false; currentRole = role; widget.onUserRoleChanged(role); }); }, userRole: role, ), ], ), ), ), ), ], ), ), ); }

Для меня «свой виджет» — это не просто кнопка, например, которой поменяли цвет и скруглили углы. «Свой виджет» — это виджет при создании которого нужно описывать его поведение и реакцию на действия пользователя.

Получилось хорошо, возможно не хватает какой нибудь анимации, но в целом — я остался доволен!

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

После этого я подумал что совсем уж кастомные решения можно сделать при необходимости. Но в данном случае получилось так, что я изобрёл колесо.

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

// Inside a Row widget DropdownButtonHideUnderline( child: DropdownButton2( icon: const SizedBox(), dropdownWidth: 418.w, dropdownMaxHeight: 233.h, dropdownDecoration: BoxDecoration( borderRadius: BorderRadius.circular(16.r), ), hint: Row( children: [ Text( AppString.more, style: AppFonts.menuUnselected, ), SizedBox( width: 5.w, ), Image.asset( 'icons/dropdown_arrow.png', height: 20.h, width: 20.w, ), ], ), items: items.map( (item) => DropdownMenuItem<String>( value: item, child: Text( item, style: AppFonts.dropDownBlack, ), ), ).toList(), value: selectedValue, onChanged: widget.onLogSelected, itemHeight: 35.h, itemPadding: EdgeInsets.only( left: 28.w, ), ), ), // Inside a Row widget

Спасибо за прочтение! Буду благодарен за критику/советы/иные комментарии.