Сделайте ваше приложение Flutter UI Dynamic: пользовательский интерфейс, управляемый сервером, в Flutter, объясненном примером
13 августа 2025 г.Вы когда -нибудь задумывались, как некоторые приложения обновляют свой пользовательский интерфейс без необходимости обновлять их в Google Play Store или Apple App Store? Не волнуйтесь, мы вас покрыли. Приложения с таким поведением используют то, что называетсяСервер, управляемый пользовательским интерфейсомилиSduiКороче говоря, и когда дело доходит до масштабируемых и динамических приложений, SDUI - это не просто дополнительная функция, а обязательная.
В этой статье я собираюсь объяснить, что такое SDUI и как вы можете добавить его в свое приложение Flutter, а также пропуская свет на полезные советы, которые следует учитывать при использовании SDUI.
Давайте сначала разберемся с концепцией SDUI.
Что такое SDUI?
SDUI или пользовательский интерфейс SDUI или сервер - это техника, с помощью которой вы можете управлять пользовательским интерфейсом вашего приложения из SEAR, не изменяя сам код вашего приложения. В SDUI сервер отправляет предварительно согласованный ответ JSON, а сторона приложения обрабатывает ответ JSON определенным образом на рендеринг пользовательского интерфейса. Изменение результатов JSON в изменениях пользовательского интерфейса в приложении без необходимости обновления приложения или изменений кода.
Теперь давайте погрузимся в практическое пример того, чтобы сделать это в приложении Flutter. В нашем примере мы будем отдавать 2 пользовательских виджета, давайте назовем ихTigerWidgetиRhinoWIdgetИ они смотрят что -то ниже:
Наша функция сборки выглядит так:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text('SDUI Demo'),
),
body: Column(
children: [
const TigerWidget(),
const RhinoWidget(),
Text('My Amazing Screen!', style: TextStyle(fontSize: 50)),
],
),
);
}
Теперь мы собираемся сделатьTigerWidgetиRhinoWidgetDynamic, поэтому мы можем отображать их на основе JSON, полученного с сервера, но сначала нам нужно разработать JSON для наших динамических виджетов.
Проектирование JSON
Мы будем использовать следующую демонстрацию JSON для нашего примера (вы можете разработать пользовательский JSON в соответствии с вашими потребностями):
{
"id": "widget_id",
"image_url": "image_url",
"title": "title",
"description": "description"
}
У нас есть 2 виджета для визуализации, поэтому мы будем использоватьidПоле, чтобы определить, какой виджет показывать на пользовательском интерфейсе. Наш сервер отправит нам список этих объектов, ответ на сервер будет выглядеть ниже:
[
{
"id": "tiger_widget",
"image_url": "https://images.unsplash.com/photo-1605092676920-8ac5ae40c7c8",
"title": "Tiger",
"description": "A beautiful Tiger"
},
{
"id": "rhino_widget",
"image_url": "https://images.unsplash.com/photo-1430026996702-608b84ce9281",
"title": "Rhino",
"description": "A beautiful Rhino"
}
]
JSON TO UI PARSER
Теперь, когда мы разработали наш JSON, нам понадобится анализатор пользовательского интерфейса, который может использовать этот JSON, чтобы отобразить наши динамические виджеты. Наш пример анализатора выглядит примерно как ниже:
class SduiParser extends StatelessWidget {
final Map<String, dynamic> parsedJsonFromServer;
const SduiParser({super.key, required this.parsedJsonFromServer});
@override
Widget build(BuildContext context) {
return Column(
children: [
...(parsedJsonFromServer['data'] as List).map((json) {
switch (json['id']) {
case 'tiger_widget':
return TigerWidget();
case 'rhino_widget':
return RhinoWidget();
default:
return const SizedBox();
}
}),
],
);
}
}
НашSduiParserКласс берет наш анализ JSON с сервера в качествеMap<String, dynamic>и делает наш виджет динамики в соответствии с нашей структурой JSON. Теперь наша функция сборки выглядит примерно как ниже:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text('SDUI Demo'),
),
body: SingleChildScrollView(
child: Column(
children: [
SduiParser(parsedJsonFromServer: _parsedSduiJson),
Text('My Amazing Screen!', style: TextStyle(fontSize: 50)),
],
),
),
);
}
Так что теперь, если мы хотим толькоRhinoWidgetрендеринг на нашем экране и удалить нашTigerWidget, Все, что нам нужно сделать, это изменить наш ответ JSON с сервера на что -то вроде ниже:
[
{
"id": "rhino_widget",
"image_url": "https://images.unsplash.com/photo-1430026996702-608b84ce9281",
"title": "Rhino",
"description": "A beautiful Rhino"
}
]
Теперь мы можем поиграть с нашим JSON, добавив или удаляя несколько объектов или изменяя их позиции и манипулируя нашим пользовательским интерфейсом с сервера без необходимости выпустить новую сборку для изменений пользовательского интерфейса, чтобы вступить в силу.
Обратите внимание, что в этом примере мы разработали только 2 компонента пользовательского интерфейса, чем больше компонентов пользовательского интерфейса, тем больше у вас контроля пользовательского интерфейса.
Полезные советы
- Остерегайтесь, чтобы сохранить постоянный взгляд на ваш анализатор пользовательского интерфейса, для крупномасштабных проектов, он может стать очень грязным очень быстро
- Всегда тестируйте свой SDUI JSON в DEV или тестовой среде, прежде чем подавать заявление в производстве, поскольку наименьшая ошибка ключевой стоимости может привести к трещинах пользовательского интерфейса приложений
- Обязательно поместите подходящий заполнитель для пустого ответа json ui, чтобы не иметь дополнительного места в вашем экране, когда приложение получает пустой ответ json, либо используйте виджет нулевого состояния, либо просто верните пустые
ContainerилиSizedBox - Обязательно примите надлежащие меры безопасности в вашем приложении от подделки пакетов, так как потенциальный хакер может изменить данные SDUI JSON против вашей воли
- Отладка SDUI может быть проблемой, так как наименьшее недопустимое изменение в SDUI может привести к сломанному пользовательскому интерфейсу, обязательно проверьте ответ SDUI JSON
Последние мысли
Реализация пользовательского интерфейса, управляемого сервером в Flutter, открывает захватывающие возможности для создания очень гибких и масштабируемых приложений, которые могут адаптироваться на лету без необходимости частых обновлений приложений. В то время как этот подход имеет свой собственный набор проблем, таких как повышенная сложность в рендеринге и отладке, но тщательное архитектурное планирование и лучшие практики могут помочь вам эффективно использовать полную силу SDUI. Принимая пользовательский интерфейс, управляемый сервером, вы позиционируете свое приложение для предоставления персонализированного, динамического опыта, который может быстро развиваться с потребностями пользователей и бизнес-целями.
Полный проектРепозиторий GitHub
Оригинал