Не слишком полагайтесь на пакеты, так как они могут сделать некоторые функции устаревшими, оставив вам дополнительную работу по созданию исправления.

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

Регулярно обновляйте файл pubspec.yaml, удаляйте пакеты, которые были добавлены ранее, но больше не используются в проекте.

2. Настройте повторяющиеся виджеты

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

Возьмем пример экрана с 4 кнопками. Вместо того, чтобы писать код кнопки с onPress, цветом и другими свойствами 4 раза, я извлеку кнопку в отдельный виджет, а затем передам эти переменные свойства.

Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text(
"Different shades of Purple in Flutter",
style: TextStyle(fontSize: 22),
),
CommonButton(
onPress: () => log("Light purple button was clicked"),
color: Colors.purple[200]!,
text: 'Light Purple',
),
CommonButton(
onPress: () => log("Purple button was clicked"),
color: Colors.purple,
text: 'Purple',
),
CommonButton(
onPress: () => log("Purple Accent button was clicked"),
color: Colors.purpleAccent,
text: 'Purple Accent',
),
CommonButton(
onPress: () => log("Deep Purple button was clicked"),
color: Colors.deepPurple,
text: 'Deep Purple',
)
],
),
view raw example.dart hosted with ❤ by GitHub

Виджет CommonButton вызывается 4 раза, и каждый раз при его вызове передаются свойства onPress, colour и text. Давайте теперь посмотрим на код виджета CommonButton:

class CommonButton extends StatelessWidget {
const CommonButton(
{required this.text,
required this.color,
required this.onPress,
Key? key})
: super(key: key);
final String text;
final Color color;
final VoidCallback onPress;
@override
Widget build(BuildContext context) {
return ElevatedButton(
child: Text(text),
onPressed: onPress,
style: ElevatedButton.styleFrom(
primary: color,
padding: EdgeInsets.symmetric(horizontal: 50, vertical: 15),
textStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
);
}
}
view raw common_button.dart hosted with ❤ by GitHub

Переменные будут разными при каждом вызове CommonButton, и именно так мы можем повторно использовать виджет CommonButton несколько раз в проекте.

3. Используйте log() вместо print()

Flutter 2.5 и более поздние версии поставляются с пакетом flutter_lints, пакетом, который определяет возможные проблемы в исходном коде вашего дротика.

Каждый раз, когда вы используете print(), отображается предупреждение «Избегайте вызовов print в производственном коде». Пакет помечает это как предупреждение, поскольку журналы печати в сборках выпуска могут регистрировать конфиденциальную информацию. Чтобы этого избежать, используйте log(), встроенную функцию dart, которая помогает находить ошибки в коде, проверяет проблемы с производительностью, стили кодирования и форматирование.

4. Виджет Stateless или Hooks over Stateful

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

По возможности избегайте использования виджетов с отслеживанием состояния. Если вы новичок во Flutter Hooks, я написал статью, в которой объясняю, как использовать виджеты Hook вместо виджетов с отслеживанием состояния.

5. Общий файл для констант

Общий файл для размещения всех констант, таких как цвета, строки активов, украшения, стили текста, может упростить весь процесс проектирования.

Вот пример файла констант,

import 'package:flutter/material.dart';
Color textColor = Color(0xFF222939);
const height25 = SizedBox(
height: 25,
);
String logo = 'assets/images/logo.png';
TextStyle f14blackLetterSpacing2 = TextStyle(
fontSize: 14, fontFamily: 'Poppins', color: textColor, letterSpacing: 2);
TextStyle f16white =
TextStyle(color: Colors.white, fontFamily: 'Poppins', fontSize: 16);
TextStyle f24whitebold = TextStyle(
fontSize: 24,
fontFamily: 'Poppins',
color: Colors.white,
fontWeight: FontWeight.bold);
BoxDecoration f42Rwhitebold = BoxDecoration(
borderRadius: BorderRadius.circular(8), color: textColor);
view raw constants.dart hosted with ❤ by GitHub

Теперь во всей программе вам не нужно каждый раз определять константу. Определите его один раз в constants.dartфайле и используйте в нескольких местах. Вы можете повторно использовать файл констант для нескольких проектов.

6. Виджет SizeBox без виджета

Используйте SizedBox с нулевой высотой, чтобы скрыть виджет.

В приведенном ниже коде я хочу отображать текстовый виджет только тогда, когда свойство showButton равно true, иначе будет отображаться виджет SizedBox с высотой 0, короче говоря, в пользовательском интерфейсе ничего не будет отображаться, если showButton равно false.

showButton
? Text(
"Light Purple Text",
style: f14blackLetterSpacing2,
)
: height0,
view raw height0.dart hosted with ❤ by GitHub

Другой подход к отображению/скрытию виджетов — использование виджета Visibility().

Виджет «Следующий текст» будет отображаться, только если индекс равен 0 (visible = true), в противном случае виджет Text становится невидимым (visible = false).

Visibility(
visible: index == 0,
child: Text(
"Different shades of Purple in Flutter",
style: TextStyle(fontSize: 22),
),
),
view raw visibility.dart hosted with ❤ by GitHub

У вас есть совет, которым вы хотите поделиться? Не стесняйтесь оставлять их в комментариях и делиться ими, если вы нашли это полезным!