Merge pull request #2 from flet-dev/python-sdk

Python SDK migrated in original form

Author: FeodorFitsner

.appveyor.yml

@@ -0,0 +1,3 @@
+# Change Log - Flet client for Python
+
+## [0.1.0](https://pypi.org/project/flet/0.1.0) - Mar 30, 2022

CHANGELOG.md

@@ -1,3 +1,5 @@
+[![Build status](https://ci.appveyor.com/api/projects/status/xwablctxslvey576/branch/main?svg=true)](https://ci.appveyor.com/project/flet-dev/flet/branch/main)
+
 # Flet
 
 Flet is a framework that enables you to easily build realtime web, mobile and desktop apps in your favorite language and securely share them with your team. No frontend experience required.

README.md

@@ -1,3 +1,5 @@
+import 'dart:ui';
+
 import 'protocol/append_control_props_request.dart';
 import 'protocol/clean_control_payload.dart';
 import 'protocol/page_controls_batch_payload.dart';
@@ -10,6 +12,11 @@ import 'protocol/register_webclient_response.dart';
 import 'protocol/session_crashed_payload.dart';
 import 'protocol/signout_payload.dart';
 
+class PageSizeChangeAction {
+  final Size newSize;
+  PageSizeChangeAction(this.newSize);
+}
+
 class RegisterWebClientAction {
   final RegisterWebClientResponse payload;
   RegisterWebClientAction(this.payload);

client/lib/actions.dart

@@ -5,21 +5,25 @@ import '../web_socket_client.dart';
 
 class ButtonControl extends StatelessWidget {
   final Control control;
+  final bool disabled;
 
-  const ButtonControl({Key? key, required this.control}) : super(key: key);
+  const ButtonControl({Key? key, required this.control, required this.disabled})
+      : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     debugPrint("Button build: ${control.id}");
-    return ElevatedButton(
-      onPressed: () {
-        debugPrint("Button ${control.id} clicked!");
-        ws.pageEventFromWeb(
-            eventTarget: control.id,
-            eventName: "click",
-            eventData: control.attrs["data"] ?? "");
-      },
-      child: Text(control.attrs["text"] ?? ""),
+    return SizedBox(
+      child: ElevatedButton(
+        onPressed: () {
+          debugPrint("Button ${control.id} clicked!");
+          ws.pageEventFromWeb(
+              eventTarget: control.id,
+              eventName: "click",
+              eventData: control.attrs["data"] ?? "");
+        },
+        child: Text(control.attrs["text"] ?? ""),
+      ),
     );
   }
 }

client/lib/controls/button.dart

@@ -1,11 +1,13 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 import 'package:flutter_redux/flutter_redux.dart';
-import 'package:flet_view/controls/dropdown.dart';
-import 'package:flet_view/models/control_view_model.dart';
+
+import '../models/control_view_model.dart';
 import '../models/app_state.dart';
+import 'expanded.dart';
+import 'row.dart';
 import 'textfield.dart';
-
+import 'dropdown.dart';
 import 'button.dart';
 import 'page.dart';
 import 'stack.dart';
@@ -31,10 +33,16 @@ Widget createControl(String id) {
         case "text":
           return TextControl(control: controlView.control);
         case "button":
-          return ButtonControl(control: controlView.control);
+          return ButtonControl(control: controlView.control, disabled: true);
+        case "expanded":
+          return ExpandedControl(
+              control: controlView.control, children: controlView.children);
         case "column":
           return ColumnControl(
               control: controlView.control, children: controlView.children);
+        case "row":
+          return RowControl(
+              control: controlView.control, children: controlView.children);
         case "stack":
           return StackControl(
               control: controlView.control, children: controlView.children);

client/lib/controls/create_control.dart

@@ -0,0 +1,18 @@
+import 'package:flutter/material.dart';
+
+class ErrorControl extends StatelessWidget {
+  final String message;
+
+  const ErrorControl(this.message, {Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    debugPrint("Error build");
+    return Container(
+      padding: const EdgeInsets.all(5),
+      decoration: BoxDecoration(
+          color: Colors.red, borderRadius: BorderRadius.circular(3)),
+      child: Text(message, style: const TextStyle(color: Colors.white)),
+    );
+  }
+}

client/lib/controls/error.dart

@@ -0,0 +1,24 @@
+import 'package:flet_view/controls/error.dart';
+import 'package:flutter/widgets.dart';
+import '../models/control.dart';
+import 'create_control.dart';
+
+class ExpandedControl extends StatelessWidget {
+  final Control control;
+  final List<Control> children;
+
+  const ExpandedControl(
+      {Key? key, required this.control, required this.children})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    debugPrint("Expanded build: ${control.id}");
+    if (control.childIds.isEmpty) {
+      return ErrorControl(
+          'Error drawing Expanded with ID ${control.id}: it doesn\'t contain child control.');
+    } else {
+      return Expanded(child: createControl(control.childIds.first));
+    }
+  }
+}

client/lib/controls/expanded.dart

@@ -1,5 +1,5 @@
+import '../widgets/screen_size.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/widgets.dart';
 import 'create_control.dart';
 import '../models/control.dart';
 
@@ -14,14 +14,12 @@ class PageControl extends StatelessWidget {
   Widget build(BuildContext context) {
     debugPrint("Page build: ${control.id}");
 
-    // MediaQueryData media = MediaQuery.of(context);
-    // debugPrint("Screen size: ${media.size}");
     return MaterialApp(
       home: Scaffold(
         body: Column(
-          children: control.childIds
-              .map((childId) => createControl(childId))
-              .toList(),
+          children:
+              control.childIds.map((childId) => createControl(childId)).toList()
+                ..add(const ScreenSize()),
         ),
       ),
     );

client/lib/controls/page.dart

@@ -0,0 +1,38 @@
+import '../models/page_breakpoint_view_model.dart';
+import 'package:flutter/widgets.dart';
+import 'package:flutter_redux/flutter_redux.dart';
+import '../models/app_state.dart';
+import '../models/control.dart';
+import 'create_control.dart';
+
+class RowControl extends StatelessWidget {
+  final Control control;
+  final List<Control> children;
+
+  const RowControl({Key? key, required this.control, required this.children})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    // debugPrint("Row build: ${control.id}");
+    // return Row(
+    //     mainAxisAlignment: MainAxisAlignment.start,
+    //     children:
+    //         control.childIds.map((childId) => createControl(childId)).toList());
+
+    return StoreConnector<AppState, PageBreakpointViewModel>(
+        distinct: true,
+        converter: (store) => PageBreakpointViewModel.fromStore(store),
+        builder: (context, viewModel) {
+          debugPrint(
+              "Row build: ${control.id} with breakpoint: ${viewModel.breakpoint}");
+
+          return Row(
+            mainAxisAlignment: MainAxisAlignment.start,
+            children: control.childIds
+                .map((childId) => createControl(childId))
+                .toList(),
+          );
+        });
+  }
+}

client/lib/controls/row.dart

@@ -12,8 +12,7 @@ class StackControl extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     debugPrint("Stack build: ${control.id}");
-    return Column(
-      mainAxisAlignment: MainAxisAlignment.center,
+    return Stack(
       children:
           control.childIds.map((childId) => createControl(childId)).toList(),
     );

client/lib/controls/stack.dart

@@ -50,7 +50,8 @@ class _TextFieldControlState extends State<TextFieldControl> {
           return TextFormField(
               //initialValue: widget.control.attrs["value"] ?? "",
               decoration: InputDecoration(
-                  labelText: widget.control.attrs["label"] ?? ""),
+                  labelText: widget.control.attrs["label"] ?? "",
+                  border: const OutlineInputBorder()),
               controller: _controller,
               onChanged: (String value) {
                 debugPrint(value);

client/lib/controls/textfield.dart

@@ -1,6 +1,7 @@
 import 'dart:developer';
 import 'dart:io';
 
+import 'package:flet_view/widgets/loading_page.dart';
 import 'package:flutter/foundation.dart';
 import 'package:window_size/window_size.dart';
 import 'package:flutter/material.dart';
@@ -13,15 +14,19 @@ import 'utils/uri.dart';
 import 'web_socket_client.dart';
 import 'controls/create_control.dart';
 
-void main([List<String>? args]) {
+import 'session_store/session_store.dart'
+    if (dart.library.io) "session_store/session_store_io.dart"
+    if (dart.library.js) "session_store/session_store_js.dart";
+
+void main([List<String>? args]) async {
   //setupWindow();
 
   final store = Store<AppState>(appReducer, initialState: AppState.initial());
 
   var pageUri = Uri.base;
 
   if (kDebugMode) {
-    pageUri = Uri.parse("http://localhost:8550/p/page-1");
+    pageUri = Uri.parse("http://localhost:8550/p/test1");
   }
 
   if (kIsWeb) {
@@ -38,25 +43,32 @@ void main([List<String>? args]) {
 
   debugPrint("Page URL: $pageUri");
 
+  String pageName = getWebPageName(pageUri);
+  String? sessionId = SessionStore.get("sessionId");
+
   // connect WS
   ws.connect(serverUrl: getWebSocketEndpoint(pageUri), store: store);
 
-  ws.registerWebClient(pageName: getWebPageName(pageUri));
-
   runApp(FletApp(
     title: 'Flet',
     store: store,
+    pageName: pageName,
+    sessionId: sessionId,
   ));
 }
 
 class FletApp extends StatelessWidget {
   final Store<AppState> store;
   final String title;
+  final String pageName;
+  final String? sessionId;
 
   const FletApp({
     Key? key,
     required this.store,
     required this.title,
+    required this.pageName,
+    required this.sessionId,
   }) : super(key: key);
 
   @override
@@ -68,11 +80,11 @@ class FletApp extends StatelessWidget {
         converter: (store) => PageViewModel.fromStore(store),
         builder: (context, viewModel) {
           if (viewModel.isLoading) {
-            return MaterialApp(
-                title: title,
-                home: const Scaffold(
-                  body: Center(child: CircularProgressIndicator()),
-                ));
+            return LoadingPage(
+              title: title,
+              pageName: pageName,
+              sessionId: sessionId,
+            );
           } else if (viewModel.error != "") {
             return MaterialApp(
                 title: title,

client/lib/main.dart

@@ -1,3 +1,5 @@
+import 'dart:ui';
+
 import 'package:equatable/equatable.dart';
 import 'control.dart';
 
@@ -10,26 +12,51 @@ class AppState extends Equatable {
   final bool isLoading;
   final String error;
   final String sessionId;
+  final Size size;
+  final String sizeBreakpoint;
+  final Map<String, double> sizeBreakpoints;
   final Map<String, Control> controls;
 
   const AppState(
       {required this.isLoading,
       required this.error,
       required this.sessionId,
+      required this.size,
+      required this.sizeBreakpoint,
+      required this.sizeBreakpoints,
       required this.controls});
 
-  factory AppState.initial() =>
-      const AppState(isLoading: true, error: "", sessionId: "", controls: {});
+  factory AppState.initial() => const AppState(
+          isLoading: true,
+          error: "",
+          sessionId: "",
+          size: Size(0, 0),
+          sizeBreakpoint: "",
+          sizeBreakpoints: {
+            "xs": 0,
+            "sm": 576,
+            "md": 768,
+            "lg": 992,
+            "xl": 1200,
+            "xxl": 1400
+          },
+          controls: {});
 
   AppState copyWith(
           {bool? isLoading,
           String? error,
           String? sessionId,
+          Size? size,
+          String? sizeBreakpoint,
+          Map<String, double>? sizeBreakpoints,
           Map<String, Control>? controls}) =>
       AppState(
           isLoading: isLoading ?? this.isLoading,
           error: error ?? this.error,
           sessionId: sessionId ?? this.sessionId,
+          size: size ?? this.size,
+          sizeBreakpoint: sizeBreakpoint ?? this.sizeBreakpoint,
+          sizeBreakpoints: sizeBreakpoints ?? this.sizeBreakpoints,
           controls: controls ?? this.controls);
 
   @override

client/lib/models/app_state.dart

@@ -0,0 +1,23 @@
+import 'dart:ui';
+
+import 'package:equatable/equatable.dart';
+import 'package:redux/redux.dart';
+
+import 'app_state.dart';
+
+class PageBreakpointViewModel extends Equatable {
+  final String breakpoint;
+  final Map<String, double> breakpoints;
+
+  const PageBreakpointViewModel(
+      {required this.breakpoint, required this.breakpoints});
+
+  static PageBreakpointViewModel fromStore(Store<AppState> store) {
+    return PageBreakpointViewModel(
+        breakpoint: store.state.sizeBreakpoint,
+        breakpoints: store.state.sizeBreakpoints);
+  }
+
+  @override
+  List<Object?> get props => [breakpoint, breakpoints];
+}