Skip to content

Commit 19ba910

Browse files
agordn52agordn52
committed
update upgrade-guide
1 parent 8ca920e commit 19ba910

File tree

1 file changed

+322
-0
lines changed

1 file changed

+322
-0
lines changed

‎resources/docs/6.x/upgrade-guide.md‎

Lines changed: 322 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
<a name="section-1"></a>
66
- [What's changed in {{ $version }}](#whats-changed-in-nylo-6 "What's Changed in {{ $version }}")
7+
- [Migration Guide](#migration-guide "Migration Guide")
78
- [How to upgrade](#how-to-upgrade "How to upgrade")
89

910

@@ -15,6 +16,327 @@ You can understand all the changes by clicking the below link.
1516

1617
<a name="View {{ $version }} changes" href="https://github.com/nylo-core/nylo/compare/5.x...6.x#diff" target="_BLANK">View changes</a>
1718

19+
<a name="migration-guide"></a>
20+
<br>
21+
22+
## Migration Guide
23+
24+
Upgrading from Nylo 5.x to Nylo 6.x will take roughly 1 hour. You can follow the below steps to upgrade your Nylo project.
25+
26+
### Step 1: Update the Nylo pubspec.yaml file
27+
28+
You'll need to ensure that your `pubspec.yaml` file contains the following dependencies:
29+
30+
```yaml
31+
dependencies:
32+
url_launcher: ^6.2.6
33+
google_fonts: ^6.2.1
34+
analyzer: ^6.7.0
35+
intl: ^0.19.0
36+
nylo_framework: ^6.1.2
37+
pretty_dio_logger: ^1.4.0
38+
cupertino_icons: ^1.0.8
39+
path_provider: ^2.1.4
40+
flutter_local_notifications: ^18.0.0
41+
font_awesome_flutter: ^10.8.0
42+
scaffold_ui: ^1.1.2
43+
...
44+
```
45+
46+
Remove `win32` if it's present in your `pubspec.yaml` file.
47+
48+
And your dev dependacies should look like this:
49+
50+
```yaml
51+
dev_dependencies:
52+
rename: ^3.0.2
53+
flutter_launcher_icons: ^0.14.1
54+
```
55+
56+
Your environment should look like this:
57+
58+
```yaml
59+
environment:
60+
sdk: '>=3.4.0 <4.0.0'
61+
flutter: ">=3.24.0 <4.0.0"
62+
```
63+
64+
### Step 2: Update the Nylo `main.dart` file
65+
66+
You'll need to update your `main.dart` file to look like this:
67+
68+
```dart
69+
import 'package:nylo_framework/nylo_framework.dart';
70+
import 'bootstrap/boot.dart';
71+
72+
/// Nylo - Framework for Flutter Developers
73+
/// Docs: https://nylo.dev/docs/6.x
74+
75+
/// Main entry point for the application.
76+
void main() async {
77+
await Nylo.init(
78+
setup: Boot.nylo,
79+
setupFinished: Boot.finished,
80+
81+
// showSplashScreen: true,
82+
// Uncomment showSplashScreen to show the splash screen
83+
// File: lib/resources/widgets/splash_screen.dart
84+
);
85+
}
86+
```
87+
88+
Next, copy this [file](https://github.com/nylo-core/nylo/blob/6.x/lib/resources/widgets/splash_screen.dart) from GitHub to **lib/resources/widgets/splash_screen.dart**.
89+
90+
Next, you'll need to update your `bootstrap/boot.dart` file to look like this:
91+
92+
```dart
93+
import 'package:flutter/material.dart';
94+
import '/resources/widgets/splash_screen.dart';
95+
import '/bootstrap/app.dart';
96+
import '/config/providers.dart';
97+
import 'package:nylo_framework/nylo_framework.dart';
98+
99+
/* Boot
100+
|--------------------------------------------------------------------------
101+
| The boot class is used to initialize your application.
102+
| Providers are booted in the order they are defined.
103+
|-------------------------------------------------------------------------- */
104+
105+
class Boot {
106+
/// This method is called to initialize Nylo.
107+
static Future<Nylo> nylo() async {
108+
WidgetsFlutterBinding.ensureInitialized();
109+
110+
if (getEnv('SHOW_SPLASH_SCREEN', defaultValue: false)) {
111+
runApp(SplashScreen.app());
112+
}
113+
114+
await _setup();
115+
return await bootApplication(providers);
116+
}
117+
118+
/// This method is called after Nylo is initialized.
119+
static Future<void> finished(Nylo nylo) async {
120+
await bootFinished(nylo, providers);
121+
122+
runApp(Main(nylo));
123+
}
124+
}
125+
126+
/* Setup
127+
|--------------------------------------------------------------------------
128+
| You can use _setup to initialize classes, variables, etc.
129+
| It's run before your app providers are booted.
130+
|-------------------------------------------------------------------------- */
131+
132+
_setup() async {
133+
/// Example: Initializing StorageConfig
134+
// StorageConfig.init(
135+
// androidOptions: AndroidOptions(
136+
// resetOnError: true,
137+
// encryptedSharedPreferences: false
138+
// )
139+
// );
140+
}
141+
```
142+
143+
### Step 3: Updates to routes
144+
145+
The 'routes.dart' file has been updated.
146+
147+
From...
148+
```dart
149+
appRouter() => nyRoutes((router) {
150+
router.route(HomePage.path, (context) => HomePage(), initialRoute: true);
151+
152+
router.route(SecondPage.path, (context) => SecondPage());
153+
154+
router.route(ThirdPage.path, (context) => ThirdPage());
155+
...
156+
```
157+
158+
To this...
159+
```dart
160+
appRouter() => nyRoutes((router) {
161+
router.add(HomePage.path).initialRoute();
162+
163+
router.add(SecondPage.path);
164+
165+
router.add(ThirdPage.path);
166+
...
167+
```
168+
169+
### Step 4: Updating your Pages
170+
171+
You'll need to update your pages to use new syntax.
172+
173+
From...
174+
```dart
175+
...
176+
class HomePage extends NyStatefulWidget<HomeController> {
177+
static const path = '/home';
178+
179+
HomePage({super.key}) : super(path, child: () => _HomePageState());
180+
}
181+
182+
class _HomePageState extends NyState<HomePage> {
183+
184+
@override
185+
init() async {
186+
187+
}
188+
189+
@override
190+
boot() async {
191+
192+
}
193+
194+
bool get useSkeletonizer => true;
195+
196+
@override
197+
Widget loading(BuildContext context) {
198+
return Scaffold(
199+
body: Center(child: Text("Loading..."))
200+
);
201+
}
202+
203+
/// The [view] method should display your page.
204+
@override
205+
Widget build(BuildContext context) {
206+
...
207+
}
208+
```
209+
210+
to this...
211+
```dart
212+
...
213+
class HomePage extends NyStatefulWidget<HomeController> {
214+
static RouteView path = ("/home", (_) => HomePage());
215+
216+
HomePage() : super(child: () => _HomePageState());
217+
}
218+
219+
class _HomePageState extends NyPage<HomePage> {
220+
221+
@override
222+
get init => () async {
223+
224+
};
225+
226+
/// Define the Loading style for the page.
227+
/// Options: LoadingStyle.normal(), LoadingStyle.skeletonizer(), LoadingStyle.none()
228+
/// uncomment the code below.
229+
LoadingStyle get loadingStyle => LoadingStyle.normal();
230+
231+
/// The [view] method displays your page.
232+
@override
233+
Widget view(BuildContext context) {
234+
}
235+
```
236+
237+
The important changes are:
238+
- `init() async` is now `get init => () async`
239+
- `boot` has been replaced with init
240+
- `useSkeletonizer` is now `LoadingStyle`
241+
- `loading` can now done using `loadingStyle`. E.g. `LoadingStyle.normal(child: Text("Loading..."))`
242+
- The page path `static const path = '/home';` is now `static RouteView path = ("/home", (_) => HomePage());`
243+
244+
### Step 5: Updating Storage Keys
245+
246+
You'll need to update your storage keys to use the new syntax.
247+
248+
From...
249+
```dart
250+
class StorageKey {
251+
static String userToken = "USER_TOKEN";
252+
static String authUser = getEnv('AUTH_USER_KEY', defaultValue: 'AUTH_USER');
253+
254+
/// Add your storage keys here...
255+
}
256+
```
257+
258+
to this...
259+
```dart
260+
class Keys {
261+
// Define the keys you want to be synced on boot
262+
static syncedOnBoot() => () async {
263+
return [
264+
auth,
265+
bearerToken,
266+
// coins.defaultValue(10), // give the user 10 coins by default
267+
];
268+
};
269+
270+
static StorageKey auth = getEnv('SK_USER', defaultValue: 'SK_USER');
271+
272+
static StorageKey bearerToken = 'SK_BEARER_TOKEN';
273+
```
274+
275+
### Step 6: Updating your Providers
276+
277+
The AppProvider has been updated to the following:
278+
279+
```dart
280+
import '/config/keys.dart';
281+
import '/app/forms/style/form_style.dart';
282+
import '/config/form_casts.dart';
283+
import '/config/decoders.dart';
284+
import '/config/design.dart';
285+
import '/config/theme.dart';
286+
import '/config/validation_rules.dart';
287+
import '/config/localization.dart';
288+
import 'package:nylo_framework/nylo_framework.dart';
289+
290+
class AppProvider implements NyProvider {
291+
@override
292+
boot(Nylo nylo) async {
293+
await NyLocalization.instance.init(
294+
localeType: localeType,
295+
languageCode: languageCode,
296+
assetsDirectory: assetsDirectory,
297+
);
298+
299+
FormStyle formStyle = FormStyle();
300+
301+
nylo.addLoader(loader);
302+
nylo.addLogo(logo);
303+
nylo.addThemes(appThemes);
304+
nylo.addToastNotification(getToastNotificationWidget);
305+
nylo.addValidationRules(validationRules);
306+
nylo.addModelDecoders(modelDecoders);
307+
nylo.addControllers(controllers);
308+
nylo.addApiDecoders(apiDecoders);
309+
nylo.addFormCasts(formCasts);
310+
nylo.useErrorStack();
311+
nylo.addFormStyle(formStyle);
312+
nylo.addAuthKey(Keys.auth);
313+
await nylo.syncKeys(Keys.syncedOnBoot);
314+
315+
// Optional
316+
// nylo.showDateTimeInLogs(); // Show date time in logs
317+
// nylo.monitorAppUsage(); // Monitor the app usage
318+
319+
return nylo;
320+
}
321+
322+
@override
323+
afterBoot(Nylo nylo) async {}
324+
}
325+
```
326+
327+
Those are the main changes you need to make to upgrade your Nylo project from 5.x to 6.x.
328+
329+
We'd suggest creating a new project in v6 and then copying over your files to the new project.
330+
331+
Example:
332+
- Pages
333+
- Providers
334+
- Models
335+
- Controllers
336+
- Config files
337+
338+
This will ensure you have a clean project with all the new changes.
339+
18340
<a name="how-to-upgrade"></a>
19341
<br>
20342
## How to upgrade

0 commit comments

Comments
 (0)