Блог

С новым объявлением Flutter 2.0 о том, что Flutter теперь является стабильной и многоплатформенной платформой из единой кодовой базы, мне стало интересно, как реализовать дизайн, совместимый со всеми различными платформами. Например, при создании текстового поля, как мы можем обеспечить согласованность дизайна на разных платформах в соответствии с операционной системой этой конкретной платформы, когда теперь нам приходится учитывать настольные приложения Android, iOS, Web, Mac, Windows и Linux?

Ранее я бы использовал пакет платформы, импортированный из ‘dart.io» и используйте троичный оператор, чтобы определить, был ли пакет iOS или Android, а затем отобразите соответствующий элемент пользовательского интерфейса:

 class PaddedTextField extends StatelessWidget {
  PaddedTextField({this.labelText, this.keyboardType});

  final String labelText;
  final TextInputType keyboardType;

  TextField androidTextField() {
    return TextField(
        keyboardType: keyboardType,
        decoration: InputDecoration(
          labelText: labelText,
        ));
  }

  CupertinoTextField iOSTextField() {
    return CupertinoTextField(
      keyboardType: keyboardType,
      placeholder: labelText,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(30, 8, 30, 8),
      child: Platform.isIOS ? iOSTextField() : androidTextField(),
    );
  }
}
 

Мои Вопросы:

1. Каким должен быть стандартный подход в дальнейшем при рассмотрении многоплатформенности? (т. е. операторы Case и switch)
2. Я не верю, что еще существуют специализированные виджеты для настольных приложений Web, Mac, Windows и Linux. Каковы характеристики пользовательского интерфейса каждой из этих платформ, чтобы обеспечить согласованность дизайна с операционной системой?