Skip to content

Commit c08a4d6

Browse files
MalcolmMielleMalcolmMielle
authored
Theming of sidebar, Welcome and Lists Page, Colors Update (#25)
* Update color of borders Furthermore the background of the side bar is now the background color. * Update style of sidebar The sidebar theming is closer to the example in libadwaita demo: * rounded corners of side elements * reduced padding * selection and hover colors * Add Combo row and colors of pop-over
1 parent a9fce9a commit c08a4d6

File tree

13 files changed

+417
-146
lines changed

13 files changed

+417
-146
lines changed

‎example/assets/logo.png

2.87 KB
Loading

‎example/lib/home_page.dart

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import 'package:example/pages/flap_page.dart';
44
import 'package:example/pages/lists_page.dart';
55
import 'package:example/pages/settings_page.dart';
66
import 'package:example/pages/view_switcher_page.dart';
7+
import 'package:example/pages/welcome.dart';
78
import 'package:flutter/material.dart';
89
import 'package:libadwaita/libadwaita.dart';
910
import 'package:window_decorations/window_decorations.dart';
@@ -103,6 +104,9 @@ class _MyHomePageState extends State<MyHomePage> {
103104
child: AdwSidebar(
104105
currentIndex: _currentIndex,
105106
children: [
107+
AdwSidebarItem(
108+
label: 'Welcome',
109+
),
106110
AdwSidebarItem(
107111
label: 'Counter',
108112
),
@@ -136,6 +140,9 @@ class _MyHomePageState extends State<MyHomePage> {
136140
child: AdwSidebar(
137141
currentIndex: _currentIndex,
138142
children: [
143+
AdwSidebarItem(
144+
label: 'Welcome',
145+
),
139146
AdwSidebarItem(
140147
label: 'Counter',
141148
),
@@ -162,6 +169,7 @@ class _MyHomePageState extends State<MyHomePage> {
162169
child: AdwViewStack(
163170
animationDuration: const Duration(milliseconds: 100),
164171
children: [
172+
const WelcomePage(),
165173
CounterPage(counter: counter),
166174
const ListsPage(),
167175
const FlapPage(),

‎example/lib/pages/lists_page.dart

Lines changed: 70 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import 'package:flutter/material.dart';
22
import 'package:libadwaita/libadwaita.dart';
3+
// ignore: implementation_imports
4+
import 'package:libadwaita/src/utils/colors.dart';
35

46
class ListsPage extends StatefulWidget {
57
const ListsPage({Key? key}) : super(key: key);
@@ -28,13 +30,75 @@ class _ListsPageState extends State<ListsPage> {
2830
return AdwClamp.scrollable(
2931
center: true,
3032
controller: _controller,
31-
child: AdwPreferencesGroup(
32-
children: List.generate(
33-
15,
34-
(index) => ListTile(
35-
title: Text("Index $index"),
33+
child: Column(
34+
children: [
35+
const Icon(
36+
Icons.list_rounded,
37+
size: 150,
3638
),
37-
),
39+
Text(
40+
"Lists",
41+
style: Theme.of(context)
42+
.textTheme
43+
.headline5
44+
?.copyWith(fontWeight: FontWeight.bold),
45+
),
46+
const Text("Rows and helpers for GtkListBox."),
47+
const SizedBox(
48+
height: 10,
49+
),
50+
AdwPreferencesGroup(children: [
51+
const AdwActionRow(
52+
start: Icon(Icons.settings),
53+
title: "Rows have a title",
54+
subtitle: "They also have a subtitle and an icon",
55+
),
56+
AdwActionRow(
57+
title: "Rows can have suffix widgets",
58+
end:
59+
TextButton(onPressed: () {}, child: const Text("Frobnicate")),
60+
)
61+
]),
62+
const AdwPreferencesGroup(children: [
63+
AdwComboRow(
64+
choices: ["Test", "Second", "Third and a long name"],
65+
title: "Combo row",
66+
)
67+
]),
68+
AdwPreferencesGroup(
69+
children: List.generate(
70+
3,
71+
(index) => ListTile(
72+
title: Text("Index $index"),
73+
),
74+
),
75+
),
76+
AdwPreferencesGroup(children: [
77+
Theme(
78+
data: Theme.of(context)
79+
.copyWith(dividerColor: Colors.transparent),
80+
child: ExpansionTile(
81+
title: const Text("Expander row"),
82+
children: [
83+
const ListTile(
84+
title: Text("A nested row"),
85+
),
86+
Divider(
87+
color: context.borderColor,
88+
height: 10,
89+
),
90+
const ListTile(
91+
title: Text("Another nested row"),
92+
)
93+
],
94+
))
95+
])
96+
]
97+
.map((e) => Padding(
98+
child: e,
99+
padding: const EdgeInsets.symmetric(vertical: 10),
100+
))
101+
.toList(),
38102
),
39103
);
40104
}

‎example/lib/pages/welcome.dart

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:flutter/painting.dart';
3+
4+
class WelcomePage extends StatelessWidget {
5+
const WelcomePage({Key? key}) : super(key: key);
6+
7+
@override
8+
Widget build(BuildContext context) {
9+
return Column(
10+
mainAxisAlignment: MainAxisAlignment.center,
11+
children: [
12+
const Image(
13+
image: AssetImage('assets/logo.png'),
14+
height: 150,
15+
),
16+
Text(
17+
"Welcome to Adwaita flutter Demo.",
18+
style: Theme.of(context)
19+
.textTheme
20+
.headline5
21+
?.copyWith(fontWeight: FontWeight.bold),
22+
),
23+
const Text(
24+
"This is a tour of the features this library has to offer.",
25+
),
26+
]
27+
.map((e) => Padding(
28+
child: e,
29+
padding: const EdgeInsets.symmetric(vertical: 10),
30+
))
31+
.toList(),
32+
);
33+
}
34+
}

‎example/pubspec.yaml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,5 @@ dev_dependencies:
2424

2525
flutter:
2626
uses-material-design: true
27+
assets:
28+
- assets/logo.png

‎lib/src/internal/popover.dart

Lines changed: 70 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,50 @@
11
import 'package:flutter/material.dart';
2-
import 'package:libadwaita/src/internal/triangle_painter.dart';
2+
import 'package:flutter/widgets.dart';
3+
4+
class BorderPainter extends CustomPainter {
5+
@override
6+
void paint(Canvas canvas, Size size) {
7+
Paint paint = Paint()
8+
..style = PaintingStyle.stroke
9+
..strokeWidth = 1
10+
..color = Colors.black12;
11+
var half = size.width / 2;
12+
final path = Path();
13+
path.moveTo(1, 12);
14+
path.lineTo(half - 10, 12);
15+
path.lineTo(half, 1);
16+
path.lineTo(half + 10, 12);
17+
path.lineTo(size.width - 1, 12);
18+
canvas.drawPath(path, paint);
19+
}
20+
21+
@override
22+
bool shouldRepaint(CustomPainter oldDelegate) => true;
23+
}
24+
25+
class PopOverClipper extends CustomClipper<Path> {
26+
PopOverClipper();
27+
28+
@override
29+
Path getClip(Size size) {
30+
var half = size.width / 2;
31+
final path = Path();
32+
path.moveTo(0, 15);
33+
path.lineTo(half - 10, 15);
34+
path.lineTo(half, 5);
35+
path.lineTo(half + 10, 15);
36+
path.lineTo(size.width, 15);
37+
path.lineTo(size.width, size.height);
38+
path.lineTo(0.0, size.height);
39+
path.close();
40+
return path;
41+
}
42+
43+
@override
44+
bool shouldReclip(CustomClipper<Path> oldClipper) {
45+
return true;
46+
}
47+
}
348

449
class _PopoverRoute extends PopupRoute {
550
final Widget body;
@@ -31,42 +76,30 @@ class _PopoverRoute extends PopupRoute {
3176
Widget buildPage(BuildContext context, Animation<double> animation,
3277
Animation<double> secondaryAnimation) {
3378
return Align(
34-
alignment: Alignment.topLeft,
35-
child: Transform.translate(
36-
offset: Offset(
37-
position.dx + contentOffset.dx, position.dy + contentOffset.dy),
38-
child: Column(
39-
mainAxisSize: MainAxisSize.min,
40-
children: [
41-
Stack(
42-
children: [
43-
CustomPaint(
44-
painter: TriangleShadowPainter(color: backgroundColor),
45-
size: const Size(36, 20),
46-
),
47-
CustomPaint(
48-
painter: TrianglePainter(color: backgroundColor),
49-
size: const Size(34, 18),
50-
),
51-
],
52-
),
53-
Transform.translate(
54-
offset: const Offset(0, -5),
55-
child: SizedBox(
56-
width: width,
57-
height: height,
58-
child: Material(
59-
type: MaterialType.card,
60-
borderRadius: BorderRadius.circular(8),
61-
color: backgroundColor,
62-
child: body,
63-
),
64-
),
65-
),
66-
],
67-
),
68-
),
69-
);
79+
alignment: Alignment.topLeft,
80+
child: Transform.translate(
81+
offset: Offset(
82+
position.dx + contentOffset.dx, position.dy + contentOffset.dy),
83+
child: ConstrainedBox(
84+
constraints:
85+
BoxConstraints(maxWidth: width, maxHeight: height ?? 200),
86+
child: ClipPath(
87+
clipper: PopOverClipper(),
88+
child: Card(
89+
shape: RoundedRectangleBorder(
90+
side:
91+
const BorderSide(color: Colors.black12, width: 1),
92+
borderRadius: BorderRadius.circular(8.0)),
93+
child: CustomPaint(
94+
painter: BorderPainter(),
95+
child: Container(
96+
margin: const EdgeInsets.only(
97+
left: 0.0,
98+
top: 10.0,
99+
right: 0.0,
100+
bottom: 0.0),
101+
child: body)))),
102+
)));
70103
}
71104

72105
@override

‎lib/src/internal/triangle_painter.dart

Lines changed: 0 additions & 53 deletions
This file was deleted.

‎lib/src/utils/colors.dart

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,23 @@ extension ColorBrightness on Color {
2222
}
2323

2424
var borderLight = Colors.black.withOpacity(0.18);
25-
var borderDark = Colors.black.withOpacity(0.75);
25+
var borderDark = const Color(0xFF454545);
2626

2727
extension BorderContext on BuildContext {
2828
Color get borderColor =>
2929
Theme.of(this).brightness == Brightness.dark ? borderDark : borderLight;
3030
}
31+
32+
extension SelectContext on BuildContext {
33+
Color get selectColor => Theme.of(this).brightness == Brightness.dark
34+
? Theme.of(this).backgroundColor.lighten(0.1)
35+
: Theme.of(this).backgroundColor.darken(0.1);
36+
37+
Color get hoverMenuColor => Theme.of(this).brightness == Brightness.dark
38+
? Theme.of(this).backgroundColor.lighten(0.05)
39+
: Theme.of(this).backgroundColor.darken(0.05);
40+
41+
Color get hoverColor => Theme.of(this).brightness == Brightness.dark
42+
? Theme.of(this).backgroundColor.lighten(0.15)
43+
: Theme.of(this).backgroundColor.darken(0.005);
44+
}

‎lib/src/widgets/action_row.dart

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,9 @@ class AdwActionRow extends StatelessWidget {
3232
autofocus: autofocus,
3333
enabled: enabled,
3434
contentPadding: contentPadding,
35-
leading: start,
35+
leading: start != null
36+
? SizedBox(height: double.infinity, child: start)
37+
: null,
3638
onTap: onActivated,
3739
title: Text(title),
3840
subtitle:

0 commit comments

Comments
 (0)