Skip to content

Commit

Permalink
AppBar
Browse files Browse the repository at this point in the history
  • Loading branch information
@FeodorFitsner
FeodorFitsner committed May 15, 2022
1 parent fe2d6ae commit 56b18a7
Show file tree
Hide file tree
Showing 4 changed files with 84 additions and 92 deletions.
75 changes: 33 additions & 42 deletions client/lib/controls/app_bar.dart
View file
Original file line number Diff line number Diff line change
@@ -1,68 +1,59 @@
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

import '../models/control.dart';
import '../utils/alignment.dart';
import '../utils/colors.dart';
import 'create_control.dart';
import 'scrollable_control.dart';

class AppBarControl extends StatelessWidget implements PreferredSizeWidget {
final Control? parent;
final Control control;
final bool parentDisabled;
final List<Control> children;
final double height;

AppBar? _appBar;

AppBarControl(
const AppBarControl(
{Key? key,
this.parent,
required this.control,
required this.children,
required this.parentDisabled})
required this.parentDisabled,
required this.height})
: super(key: key);

@override
Widget build(BuildContext context) {
debugPrint("AppBar build: ${control.id}");

// final spacing = control.attrDouble("spacing", 10)!;
// final mainAlignment =
// parseMainAxisAlignment(control, "alignment", MainAxisAlignment.start);
// bool tight = control.attrBool("tight", false)!;
// bool wrap = control.attrBool("wrap", false)!;
// ScrollMode scrollMode = ScrollMode.values.firstWhere(
// (m) =>
// m.name.toLowerCase() ==
// control.attrString("scroll", "")!.toLowerCase(),
// orElse: () => ScrollMode.none);
// bool disabled = control.isDisabled || parentDisabled;

// List<Widget> controls = [];

// bool firstControl = true;
// for (var ctrl in children.where((c) => c.isVisible)) {
// // spacer between displayed controls
// if (!wrap &&
// spacing > 0 &&
// !firstControl &&
// mainAlignment != MainAxisAlignment.spaceAround &&
// mainAlignment != MainAxisAlignment.spaceBetween &&
// mainAlignment != MainAxisAlignment.spaceEvenly) {
// controls.add(SizedBox(width: spacing));
// }
// firstControl = false;

// // displayed control
// controls.add(createControl(control, ctrl.id, disabled));
// }

_appBar = AppBar(
title: Text("Hello!"),
var leadingCtrls =
children.where((c) => c.name == "leading" && c.isVisible);
var titleCtrls = children.where((c) => c.name == "title" && c.isVisible);
var actionCtrls = children.where((c) => c.name == "action" && c.isVisible);

var leadingWidth = control.attrDouble("leadingWidth");
var centerTitle = control.attrBool("centerTitle", false)!;
var color = HexColor.fromString(
Theme.of(context), control.attrString("color", "")!);
var bgcolor = HexColor.fromString(
Theme.of(context), control.attrString("bgcolor", "")!);

return AppBar(
leading: leadingCtrls.isNotEmpty
? createControl(control, leadingCtrls.first.id, control.isDisabled)
: null,
leadingWidth: leadingWidth,
title: titleCtrls.isNotEmpty
? createControl(control, titleCtrls.first.id, control.isDisabled)
: null,
centerTitle: centerTitle,
toolbarHeight: preferredSize.height,
foregroundColor: color,
backgroundColor: bgcolor,
actions: actionCtrls
.map((c) => createControl(control, c.id, control.isDisabled))
.toList(),
);
return _appBar!;
}

@override
Size get preferredSize => _appBar!.preferredSize;
Size get preferredSize => Size.fromHeight(height);
}
6 changes: 0 additions & 6 deletions client/lib/controls/create_control.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,12 +71,6 @@ Widget createControl(Control? parent, String id, bool parentDisabled) {
case ControlType.page:
return PageControl(
control: controlView.control, children: controlView.children);
case ControlType.appBar:
return AppBarControl(
parent: parent,
control: controlView.control,
children: controlView.children,
parentDisabled: parentDisabled);
case ControlType.text:
return TextControl(control: controlView.control);
case ControlType.icon:
Expand Down
51 changes: 11 additions & 40 deletions client/lib/controls/page.dart
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import 'package:flet_view/controls/app_bar.dart';
import 'package:flet_view/models/control_view_model.dart';

import '../models/control_type.dart';
Expand Down Expand Up @@ -147,8 +148,16 @@ class PageControl extends StatelessWidget {
darkTheme: darkTheme,
themeMode: themeMode,
home: Scaffold(
appBar:
appBarView != null ? createAppBar(theme, appBarView) : null,
appBar: appBarView != null
? AppBarControl(
parent: control,
control: appBarView.control,
children: appBarView.children,
parentDisabled: disabled,
height: appBarView.control
.attrDouble("toolbarHeight", kToolbarHeight)!,
)
: null,
body: Stack(children: [
SizedBox.expand(
child: Container(
Expand All @@ -174,42 +183,4 @@ class PageControl extends StatelessWidget {
);
});
}

PreferredSizeWidget createAppBar(
ThemeData theme, ControlViewModel appBarView) {
var leadingCtrls =
appBarView.children.where((c) => c.name == "leading" && c.isVisible);
var titleCtrls =
appBarView.children.where((c) => c.name == "title" && c.isVisible);
var actionCtrls =
appBarView.children.where((c) => c.name == "action" && c.isVisible);

var leadingWidth = appBarView.control.attrDouble("leadingWidth");
var toolbarHeight = appBarView.control.attrDouble("toolbarHeight");
var centerTitle = appBarView.control.attrBool("centerTitle", false)!;
var color =
HexColor.fromString(theme, appBarView.control.attrString("color", "")!);
var bgcolor = HexColor.fromString(
theme, appBarView.control.attrString("bgcolor", "")!);

return AppBar(
leading: leadingCtrls.isNotEmpty
? createControl(appBarView.control, leadingCtrls.first.id,
appBarView.control.isDisabled)
: null,
leadingWidth: leadingWidth,
title: titleCtrls.isNotEmpty
? createControl(appBarView.control, titleCtrls.first.id,
appBarView.control.isDisabled)
: null,
centerTitle: centerTitle,
toolbarHeight: toolbarHeight,
foregroundColor: color,
backgroundColor: bgcolor,
actions: actionCtrls
.map((c) => createControl(
appBarView.control, c.id, appBarView.control.isDisabled))
.toList(),
);
}
}
44 changes: 40 additions & 4 deletions sdk/python/playground/appbar-test.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@
from flet.popup_menu_button import PopupMenuButton, PopupMenuItem
from flet.row import Row

LIGHT_SEED_COLOR = colors.DEEP_ORANGE
DARK_SEED_COLOR = colors.INDIGO


def main(page: Page):
def check_item_clicked(e):
Expand All @@ -16,18 +19,51 @@ def check_item_clicked(e):

page.title = "AppBar Example"
page.theme_mode = "light"
page.theme = theme.Theme(color_scheme_seed=colors.DEEP_ORANGE, use_material3=True)
page.theme = theme.Theme(color_scheme_seed=LIGHT_SEED_COLOR, use_material3=True)
page.dark_theme = theme.Theme(color_scheme_seed=DARK_SEED_COLOR, use_material3=True)
page.update()

def toggle_theme_mode(e):
page.theme_mode = "dark" if page.theme_mode == "light" else "light"
lightMode.icon = (
icons.WB_SUNNY_OUTLINED if page.theme_mode == "light" else icons.WB_SUNNY
)
page.update()

lightMode = IconButton(
icons.WB_SUNNY_OUTLINED if page.theme_mode == "light" else icons.WB_SUNNY,
on_click=toggle_theme_mode,
)

def toggle_material(e):
use_material3 = not page.theme.use_material3
page.theme = theme.Theme(
color_scheme_seed=LIGHT_SEED_COLOR, use_material3=use_material3
)
page.dark_theme = theme.Theme(
color_scheme_seed=DARK_SEED_COLOR, use_material3=use_material3
)
materialMode.icon = (
icons.FILTER_3 if page.theme.use_material3 else icons.FILTER_2
)
page.update()

materialMode = IconButton(
icons.FILTER_3 if page.theme.use_material3 else icons.FILTER_2,
on_click=toggle_material,
)

page.padding = 50
page.appbar = AppBar(
bgcolor=colors.SECONDARY_CONTAINER,
# toolbar_height=100,
# bgcolor=colors.SECONDARY_CONTAINER,
leading=Icon(icons.PALETTE),
leading_width=40,
title=Text("Hello app!"),
title=Text("AppBar Example"),
center_title=False,
actions=[
IconButton(icons.LIGHT),
lightMode,
materialMode,
PopupMenuButton(
items=[
PopupMenuItem(text="Item 1"),
Expand Down

0 comments on commit 56b18a7

Please sign in to comment.