Skip to content

Row, Column and ListView spacing and scrolling improvements #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 4, 2022
Merged

Row, Column and ListView spacing and scrolling improvements #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions client/lib/controls/column.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ class ColumnControl extends StatelessWidget {
m.name.toLowerCase() ==
control.attrString("scroll", "")!.toLowerCase(),
orElse: () => ScrollMode.none);
final autoScroll = control.attrBool("autoScroll", false)!;
bool disabled = control.isDisabled || parentDisabled;

List<Widget> controls = [];
Expand Down Expand Up @@ -79,6 +80,7 @@ class ColumnControl extends StatelessWidget {
child: widget,
scrollDirection: wrap ? Axis.horizontal : Axis.vertical,
scrollMode: scrollMode,
autoScroll: autoScroll,
)
: widget,
parent,
Expand Down
17 changes: 14 additions & 3 deletions client/lib/controls/list_view.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ class ListViewControl extends StatelessWidget {

final ScrollController _controller = ScrollController();

// This is what you're looking for!
void _scrollDown() {
_controller.animateTo(
_controller.position.maxScrollExtent,
Expand All @@ -38,6 +37,9 @@ class ListViewControl extends StatelessWidget {
final horizontal = control.attrBool("horizontal", false)!;
final autoScroll = control.attrBool("autoScroll", false)!;
final spacing = control.attrDouble("spacing", 0)!;
final dividerThickness = control.attrDouble("dividerThickness", 0)!;
final itemExtent = control.attrDouble("itemExtent");
final firstItemPrototype = control.attrBool("firstItemPrototype", false)!;
final padding = parseEdgeInsets(control, "padding");

List<Control> visibleControls = children.where((c) => c.isVisible).toList();
Expand All @@ -60,19 +62,28 @@ class ListViewControl extends StatelessWidget {
control, visibleControls[index].id, disabled);
},
separatorBuilder: (context, index) {
return Divider(height: spacing);
return horizontal
? dividerThickness == 0
? SizedBox(width: spacing)
: VerticalDivider(
width: spacing, thickness: dividerThickness)
: dividerThickness == 0
? SizedBox(height: spacing)
: Divider(
height: spacing, thickness: dividerThickness);
},
)
: ListView.builder(
controller: _controller,
scrollDirection: horizontal ? Axis.horizontal : Axis.vertical,
padding: padding,
itemCount: children.length,
itemExtent: itemExtent,
itemBuilder: (context, index) {
return createControl(
control, visibleControls[index].id, disabled);
},
prototypeItem: children.isNotEmpty
prototypeItem: firstItemPrototype && children.isNotEmpty
? createControl(control, visibleControls[0].id, disabled)
: null,
),
Expand Down
3 changes: 2 additions & 1 deletion client/lib/controls/page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ class PageControl extends StatelessWidget {
control.attrString("scroll", "")!.toLowerCase(),
orElse: () => ScrollMode.none);

debugPrint("scrollMode: $scrollMode");
final autoScroll = control.attrBool("autoScroll", false)!;

Control? offstage;
Control? appBar;
Expand Down Expand Up @@ -168,6 +168,7 @@ class PageControl extends StatelessWidget {
child: column,
scrollDirection: Axis.vertical,
scrollMode: scrollMode,
autoScroll: autoScroll,
)
: column)),
...offstageWidgets,
Expand Down
9 changes: 7 additions & 2 deletions client/lib/controls/row.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ class RowControl extends StatelessWidget {
m.name.toLowerCase() ==
control.attrString("scroll", "")!.toLowerCase(),
orElse: () => ScrollMode.none);
final autoScroll = control.attrBool("autoScroll", false)!;
bool disabled = control.isDisabled || parentDisabled;

List<Widget> controls = [];
Expand Down Expand Up @@ -75,18 +76,22 @@ class RowControl extends StatelessWidget {
children: controls,
),
wrap: wrap,
scrollMode: scrollMode),
scrollMode: scrollMode,
autoScroll: autoScroll),
parent,
control);
}

Widget wrapAutoScroll(Widget child,
{required bool wrap, required ScrollMode scrollMode}) {
{required bool wrap,
required ScrollMode scrollMode,
required bool autoScroll}) {
return scrollMode != ScrollMode.none
? ScrollableControl(
child: child,
scrollDirection: wrap ? Axis.vertical : Axis.horizontal,
scrollMode: scrollMode,
autoScroll: autoScroll,
)
: child;
}
Expand Down
32 changes: 25 additions & 7 deletions client/lib/controls/scrollable_control.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,14 @@ class ScrollableControl extends StatefulWidget {
final Widget child;
final Axis scrollDirection;
final ScrollMode scrollMode;
final bool autoScroll;

const ScrollableControl(
{Key? key,
required this.child,
required this.scrollDirection,
required this.scrollMode})
required this.scrollMode,
required this.autoScroll})
: super(key: key);

@override
Expand All @@ -24,16 +26,32 @@ class ScrollableControl extends StatefulWidget {
class _ScrollableControlState extends State<ScrollableControl> {
final ScrollController _controller = ScrollController();

void _scrollDown() {
_controller.animateTo(
_controller.position.maxScrollExtent,
duration: const Duration(seconds: 1),
curve: Curves.fastOutSlowIn,
);
}

@override
Widget build(BuildContext context) {
bool isAlwaysShown = widget.scrollMode == ScrollMode.always ||
(widget.scrollMode == ScrollMode.adaptive &&
!kIsWeb &&
!Platform.isIOS &&
!Platform.isAndroid);
bool? thumbVisibility = widget.scrollMode == ScrollMode.always ||
(widget.scrollMode == ScrollMode.adaptive &&
!kIsWeb &&
!Platform.isIOS &&
!Platform.isAndroid)
? true
: null;

if (widget.autoScroll) {
WidgetsBinding.instance.addPostFrameCallback((_) {
_scrollDown();
});
}

return Scrollbar(
isAlwaysShown: isAlwaysShown,
thumbVisibility: thumbVisibility,
controller: _controller,
child: SingleChildScrollView(
controller: _controller,
Expand Down
12 changes: 12 additions & 0 deletions sdk/python/flet/column.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ def __init__(
wrap: bool = None,
run_spacing: OptionalNumber = None,
scroll: ScrollMode = None,
auto_scroll: bool = None,
):
ConstrainedControl.__init__(
self,
Expand All @@ -58,6 +59,7 @@ def __init__(
self.run_spacing = run_spacing
self.__scroll = False
self.scroll = scroll
self.auto_scroll = auto_scroll

def _get_control_name(self):
return "column"
Expand Down Expand Up @@ -144,6 +146,16 @@ def scroll(self, value: ScrollMode):
value = "none"
self._set_attr("scroll", value)

# auto_scroll
@property
def auto_scroll(self):
return self._get_attr("autoScroll")

@auto_scroll.setter
@beartype
def auto_scroll(self, value: Optional[bool]):
self._set_attr("autoScroll", value)

# controls
@property
def controls(self):
Expand Down
36 changes: 36 additions & 0 deletions sdk/python/flet/list_view.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ def __init__(
#
horizontal: bool = None,
spacing: OptionalNumber = None,
item_extent: OptionalNumber = None,
first_item_prototype: bool = None,
divider_thickness: OptionalNumber = None,
padding: PaddingValue = None,
auto_scroll: bool = None,
):
Expand All @@ -44,6 +47,9 @@ def __init__(
self.controls = controls
self.horizontal = horizontal
self.spacing = spacing
self.divider_thickness = divider_thickness
self.item_extent = item_extent
self.first_item_prototype = first_item_prototype
self.padding = padding
self.auto_scroll = auto_scroll

Expand Down Expand Up @@ -77,6 +83,36 @@ def spacing(self):
def spacing(self, value: OptionalNumber):
self._set_attr("spacing", value)

# divider_thickness
@property
def divider_thickness(self):
return self._get_attr("dividerThickness")

@divider_thickness.setter
@beartype
def divider_thickness(self, value: OptionalNumber):
self._set_attr("dividerThickness", value)

# item_extent
@property
def item_extent(self):
return self._get_attr("itemExtent")

@item_extent.setter
@beartype
def item_extent(self, value: OptionalNumber):
self._set_attr("itemExtent", value)

# first_item_prototype
@property
def first_item_prototype(self):
return self._get_attr("firstItemPrototype")

@first_item_prototype.setter
@beartype
def first_item_prototype(self, value: Optional[bool]):
self._set_attr("firstItemPrototype", value)

# padding
@property
def padding(self):
Expand Down
10 changes: 10 additions & 0 deletions sdk/python/flet/page.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -445,6 +445,16 @@ def scroll(self, value: ScrollMode):
value = "none"
self._set_attr("scroll", value)

# auto_scroll
@property
def auto_scroll(self):
return self._get_attr("autoScroll")

@auto_scroll.setter
@beartype
def auto_scroll(self, value: Optional[bool]):
self._set_attr("autoScroll", value)

# window_width
@property
def window_width(self):
Expand Down
12 changes: 12 additions & 0 deletions sdk/python/flet/row.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ def __init__(
wrap: bool = None,
run_spacing: OptionalNumber = None,
scroll: ScrollMode = None,
auto_scroll: bool = None,
):
ConstrainedControl.__init__(
self,
Expand All @@ -58,6 +59,7 @@ def __init__(
self.run_spacing = run_spacing
self.__scroll = False
self.scroll = scroll
self.auto_scroll = auto_scroll

def _get_control_name(self):
return "row"
Expand Down Expand Up @@ -144,6 +146,16 @@ def scroll(self, value: ScrollMode):
value = "none"
self._set_attr("scroll", value)

# auto_scroll
@property
def auto_scroll(self):
return self._get_attr("autoScroll")

@auto_scroll.setter
@beartype
def auto_scroll(self, value: Optional[bool]):
self._set_attr("autoScroll", value)

# controls
@property
def controls(self):
Expand Down