From 36d2e2f67e01c1a3e415b9197a9a5a71a867127a Mon Sep 17 00:00:00 2001 From: Abdallah Shaban Date: Thu, 25 Jan 2024 17:48:57 -0800 Subject: [PATCH] chore(example): Update example app to have layout work on mobile. (#22) Update mobile and smaller screen layout. --- examples/openai/celest/project.dart | 2 +- examples/openai/lib/main.dart | 96 +++++++++++++++-------------- 2 files changed, 51 insertions(+), 47 deletions(-) diff --git a/examples/openai/celest/project.dart b/examples/openai/celest/project.dart index 12162a52..a6298b07 100644 --- a/examples/openai/celest/project.dart +++ b/examples/openai/celest/project.dart @@ -1,5 +1,5 @@ import 'package:celest/celest.dart'; const project = Project( - name: 'celest_project', + name: 'openai_example', ); diff --git a/examples/openai/lib/main.dart b/examples/openai/lib/main.dart index 0d6be826..d39a1ee9 100644 --- a/examples/openai/lib/main.dart +++ b/examples/openai/lib/main.dart @@ -108,9 +108,10 @@ class _OpenAiAppState extends State { body: SingleChildScrollView( child: Center( child: Padding( - padding: const EdgeInsets.only(right: 100, left: 100), + padding: const EdgeInsets.symmetric(horizontal: 10), child: Column( mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.center, children: [ const SizedBox(height: 100), Text( @@ -135,56 +136,59 @@ class _OpenAiAppState extends State { _ => const CircularProgressIndicator(), }, ), - Row( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - children: [ - Tooltip( - message: - 'The maximum number of words for the AI to generate', - child: SizedBox( - width: 200, - child: TextField( - keyboardType: TextInputType.number, - // Allow only digits - inputFormatters: [ - FilteringTextInputFormatter.digitsOnly, - ], - decoration: const InputDecoration( - hintText: 'Max tokens', + SizedBox( + width: double.infinity, + child: Wrap( + alignment: WrapAlignment.spaceEvenly, + children: [ + Tooltip( + message: + 'The maximum number of words for the AI to generate', + child: SizedBox( + width: 150, + child: TextField( + keyboardType: TextInputType.number, + // Allow only digits + inputFormatters: [ + FilteringTextInputFormatter.digitsOnly, + ], + decoration: const InputDecoration( + hintText: 'Max tokens', + ), + controller: _maxTokensController, ), - controller: _maxTokensController, ), ), - ), - Tooltip( - message: - 'The higher the temperature, the more random the text', - child: Row( - mainAxisSize: MainAxisSize.min, - children: [ - Text( - 'Temperature', - style: Theme.of(context).textTheme.bodyMedium, - ), - SizedBox( - width: 200, - child: Slider( - value: _temperatureSliderValue, - min: 0, - max: 2, - divisions: 10, - label: _temperatureSliderValue.toString(), - onChanged: (double value) { - setState(() { - _temperatureSliderValue = value; - }); - }, + Tooltip( + message: + 'The higher the temperature, the more random the text', + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + Text( + 'Temperature', + style: Theme.of(context).textTheme.bodyMedium, ), - ), - ], + SizedBox( + width: 150, + child: Slider( + value: _temperatureSliderValue, + min: 0, + max: 2, + divisions: 10, + label: _temperatureSliderValue.toString(), + onChanged: (double value) { + setState(() { + _temperatureSliderValue = value; + }); + }, + ), + ), + ], + ), ), - ), - ], + ], + ), ), const SizedBox(height: 20), TextField(