Skip to content

Commit 064ed16

Browse files
LucasXu0LucasXu0
committed
feat: implement drawer and simple editor
1 parent 8a53abe commit 064ed16

File tree

6 files changed

+198
-41968
lines changed

6 files changed

+198
-41968
lines changed

‎frontend/app_flowy/packages/appflowy_editor/example/assets/big_document.json‎

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

‎frontend/app_flowy/packages/appflowy_editor/example/assets/images/icon.png‎

245 KB
Loading

‎frontend/app_flowy/packages/appflowy_editor/example/lib/home_page.dart‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
import 'dart:convert';
2+
3+
import 'package:appflowy_editor/appflowy_editor.dart';
4+
import 'package:example/pages/simple_editor.dart';
5+
import 'package:flutter/material.dart';
6+
import 'package:flutter/services.dart';
7+
8+
class HomePage extends StatefulWidget {
9+
const HomePage({Key? key}) : super(key: key);
10+
11+
@override
12+
State<HomePage> createState() => _HomePageState();
13+
}
14+
15+
class _HomePageState extends State<HomePage> {
16+
final _scaffoldKey = GlobalKey<ScaffoldState>();
17+
late WidgetBuilder _widgetBuilder;
18+
late EditorState _editorState;
19+
20+
@override
21+
void initState() {
22+
super.initState();
23+
24+
_widgetBuilder = (context) {
25+
_editorState = EditorState.empty();
26+
return AppFlowyEditor(editorState: EditorState.empty());
27+
};
28+
}
29+
30+
@override
31+
Widget build(BuildContext context) {
32+
return Scaffold(
33+
key: _scaffoldKey,
34+
extendBodyBehindAppBar: true,
35+
drawer: _buildDrawer(context),
36+
body: _buildBody(context),
37+
floatingActionButton: _buildFloatingActionButton(context),
38+
);
39+
}
40+
41+
Widget _buildDrawer(BuildContext context) {
42+
return Drawer(
43+
child: ListView(
44+
padding: EdgeInsets.zero,
45+
children: [
46+
DrawerHeader(
47+
padding: EdgeInsets.zero,
48+
margin: EdgeInsets.zero,
49+
child: Image.asset(
50+
'assets/images/icon.png',
51+
fit: BoxFit.fill,
52+
),
53+
),
54+
55+
// AppFlowy Editor Demo
56+
_buildSeparator(context, 'AppFlowy Editor Demo'),
57+
_buildListTile(context, 'With Example.json', () {
58+
final jsonString = rootBundle.loadString('assets/example.json');
59+
_loadJsonEditor(context, jsonString);
60+
}),
61+
_buildListTile(context, 'With Empty Document', () {
62+
final jsonString = Future<String>.value(
63+
json.encode(EditorState.empty().document.toJson()).toString(),
64+
);
65+
_loadJsonEditor(context, jsonString);
66+
}),
67+
68+
// Encoder Demo
69+
_buildSeparator(context, 'Encoder Demo'),
70+
_buildListTile(context, 'Export To JSON', () {}),
71+
_buildListTile(context, 'Export to Markdown', () {}),
72+
73+
// Decoder Demo
74+
_buildSeparator(context, 'Decoder Demo'),
75+
_buildListTile(context, 'Import From JSON', () {}),
76+
_buildListTile(context, 'Import From Markdown', () {}),
77+
78+
// Theme Demo
79+
_buildSeparator(context, 'Theme Demo'),
80+
_buildListTile(context, 'Bulit In Dark Mode', () {}),
81+
_buildListTile(context, 'Custom Theme', () {}),
82+
],
83+
),
84+
);
85+
}
86+
87+
Widget _buildBody(BuildContext context) {
88+
return _widgetBuilder(context);
89+
}
90+
91+
Widget _buildListTile(
92+
BuildContext context,
93+
String text,
94+
VoidCallback? onTap,
95+
) {
96+
return ListTile(
97+
dense: true,
98+
contentPadding: const EdgeInsets.only(left: 16),
99+
title: Text(
100+
text,
101+
style: const TextStyle(
102+
color: Colors.blue,
103+
fontSize: 14,
104+
),
105+
),
106+
onTap: () {
107+
Navigator.pop(context);
108+
onTap?.call();
109+
},
110+
);
111+
}
112+
113+
Widget _buildSeparator(BuildContext context, String text) {
114+
return Padding(
115+
padding: const EdgeInsets.only(left: 16, top: 16, bottom: 4),
116+
child: Text(
117+
text,
118+
style: const TextStyle(
119+
color: Colors.grey,
120+
fontSize: 12,
121+
fontWeight: FontWeight.bold,
122+
),
123+
),
124+
);
125+
}
126+
127+
Widget _buildFloatingActionButton(BuildContext context) {
128+
return FloatingActionButton(
129+
onPressed: () {
130+
_scaffoldKey.currentState?.openDrawer();
131+
},
132+
child: const Icon(Icons.menu),
133+
);
134+
}
135+
136+
void _loadJsonEditor(BuildContext context, Future<String> jsonString) {
137+
setState(
138+
() {
139+
_widgetBuilder = (context) => SimpleEditor(
140+
jsonString: jsonString,
141+
onEditorStateChange: (editorState) {
142+
_editorState = editorState;
143+
},
144+
);
145+
},
146+
);
147+
}
148+
}

‎frontend/app_flowy/packages/appflowy_editor/example/lib/main.dart‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import 'dart:convert';
22
import 'dart:io';
33

4+
import 'package:example/home_page.dart';
45
import 'package:example/plugin/editor_theme.dart';
56
import 'package:flutter/foundation.dart';
67
import 'package:flutter/material.dart';
@@ -59,11 +60,7 @@ class _MyHomePageState extends State<MyHomePage> {
5960

6061
@override
6162
Widget build(BuildContext context) {
62-
return Scaffold(
63-
extendBodyBehindAppBar: true,
64-
body: _buildEditor(context),
65-
floatingActionButton: _buildExpandableFab(),
66-
);
63+
return const HomePage();
6764
}
6865

6966
Widget _buildEditor(BuildContext context) {
@@ -145,7 +142,10 @@ class _MyHomePageState extends State<MyHomePage> {
145142
);
146143
}
147144

148-
Widget _buildExpandableFab() {
145+
Widget _buildExpandableFab(BuildContext context) {
146+
return FloatingActionButton(onPressed: () {
147+
Scaffold.of(context).openDrawer();
148+
});
149149
return ExpandableFab(
150150
distance: 112.0,
151151
children: [

‎frontend/app_flowy/packages/appflowy_editor/example/lib/pages/simple_editor.dart‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import 'dart:convert';
2+
3+
import 'package:appflowy_editor/appflowy_editor.dart';
4+
import 'package:flutter/material.dart';
5+
6+
class SimpleEditor extends StatelessWidget {
7+
const SimpleEditor({
8+
super.key,
9+
required this.jsonString,
10+
required this.onEditorStateChange,
11+
});
12+
13+
final Future<String> jsonString;
14+
final void Function(EditorState editorState) onEditorStateChange;
15+
16+
@override
17+
Widget build(BuildContext context) {
18+
return FutureBuilder<String>(
19+
future: jsonString,
20+
builder: (context, snapshot) {
21+
if (snapshot.hasData &&
22+
snapshot.connectionState == ConnectionState.done) {
23+
final editorState = EditorState(
24+
document: Document.fromJson(
25+
Map<String, Object>.from(
26+
json.decode(snapshot.data!),
27+
),
28+
),
29+
);
30+
onEditorStateChange(editorState);
31+
return AppFlowyEditor(
32+
editorState: editorState,
33+
autoFocus: editorState.document.isEmpty,
34+
);
35+
} else {
36+
return const Center(
37+
child: CircularProgressIndicator(),
38+
);
39+
}
40+
},
41+
);
42+
}
43+
}

‎frontend/app_flowy/packages/appflowy_editor/example/pubspec.yaml‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,7 @@ flutter:
7070
# To add assets to your application, add an assets section, like this:
7171
assets:
7272
- example.json
73-
- big_document.json
74-
# - images/a_dot_ham.jpeg
73+
- assets/images/icon.png
7574

7675
# An image asset can refer to one or more resolution-specific "variants", see
7776
# https://flutter.dev/assets-and-images/#resolution-aware

0 commit comments

Comments
 (0)