2ndbeam/fluffychat-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

design: Big redesign of three column mode to advanced two column mode

Browse source
This commit is contained in:
krille-chan 2023-08-12 11:52:20 +02:00
commit 9e13bd8dfd
No known key found for this signature in database
24 changed files with 938 additions and 765 deletions
Download patch file Download diff file Expand all files Collapse all files

40
lib/widgets/layouts/max_width_body.dart
View file

@ -2,15 +2,19 @@ import 'dart:math';
import 'package:flutter/material.dart';
import 'package:fluffychat/config/app_config.dart';
class MaxWidthBody extends StatelessWidget {
final Widget? child;
final double maxWidth;
final bool withFrame;
final bool withScrolling;
const MaxWidthBody({
this.child,
this.maxWidth = 600,
this.withScrolling = false,
this.withFrame = true,
this.withScrolling = true,
Key? key,
}) : super(key: key);
@override
@ -18,21 +22,33 @@ class MaxWidthBody extends StatelessWidget {
return SafeArea(
child: LayoutBuilder(
builder: (context, constraints) {
final paddingVal = max(0, (constraints.maxWidth - maxWidth) / 2);
final hasPadding = paddingVal > 0;
final padding = EdgeInsets.symmetric(
vertical: hasPadding ? 32 : 0,
horizontal: max(0, (constraints.maxWidth - maxWidth) / 2),
);
return withScrolling
? SingleChildScrollView(
physics: const ScrollPhysics(),
child: Padding(
padding: padding,
final childWithPadding = Padding(
padding: padding,
child: withFrame && hasPadding
? Material(
elevation:
Theme.of(context).appBarTheme.scrolledUnderElevation ??
4,
clipBehavior: Clip.hardEdge,
borderRadius: BorderRadius.circular(
AppConfig.borderRadius,
),
shadowColor: Theme.of(context).appBarTheme.shadowColor,
child: child,
),
)
: Padding(
padding: padding,
child: child,
);
)
: child,
);
if (!withScrolling) return childWithPadding;
return SingleChildScrollView(
physics: const ScrollPhysics(),
child: childWithPadding,
);
},
),
);

61
lib/widgets/layouts/side_view_layout.dart
View file

@ -1,61 +0,0 @@
import 'package:flutter/material.dart';
import 'package:fluffychat/config/themes.dart';
class SideViewLayout extends StatelessWidget {
final Widget mainView;
final Widget sideView;
final bool hideSideView;
const SideViewLayout({
Key? key,
required this.mainView,
required this.sideView,
required this.hideSideView,
}) : super(key: key);
@override
Widget build(BuildContext context) {
final sideView = this.sideView;
const sideViewWidth = 360.0;
final threeColumnMode = FluffyThemes.isThreeColumnMode(context);
return Stack(
children: [
AnimatedPositioned(
duration: FluffyThemes.animationDuration,
curve: FluffyThemes.animationCurve,
top: 0,
left: 0,
bottom: 0,
right: !threeColumnMode || hideSideView ? 0 : sideViewWidth,
child: ClipRRect(child: mainView),
),
AnimatedPositioned(
duration: FluffyThemes.animationDuration,
curve: FluffyThemes.animationCurve,
bottom: 0,
top: 0,
right: 0,
left: !threeColumnMode && !hideSideView ? 0 : null,
width: hideSideView
? 0
: !threeColumnMode
? null
: sideViewWidth,
child: hideSideView
? const SizedBox.shrink()
: Container(
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
border: Border(
left: BorderSide(
color: Theme.of(context).dividerColor,
),
),
),
child: sideView,
),
),
],
);
}
}