[Flutter] Navigator의 간단한 화면 마이그레이션 프로젝트를 위한 템플릿
Navigator를 이용하여 간단한 템플릿 프로젝트를 만들었습니다.
최대한 간단하게 적당히 첨가하세요.
[Flutter] 애플리케이션별 간단한 화면 마이그레이션 템플릿
템플릿 완료
프로비저닝
lib
디렉터리 이하의 구조apps
카탈로그sample_app
디렉토리: 개별 어플리케이션 저장counter.dart
: 개별 응용 코드screens
카탈로그home_screen.dart
: 어플리케이션의 홈 화면을 ListView에 표시widgets
카탈로그app_button.dart
: 홈 화면에 표시되는 버튼main.dart
routes.dart
: 화면 마이그레이션을 위한 준비 파일코드 내용
main.dart
routes.dart
/// ①アプリのコード配置
// appsディレクトリ下にsimple_app等ディレクトリを作成
// 元々のmain.dartをcounter.dart等にファイル名変更+「void main() => runApp(MyApp());」等は削除
// 各アプリは重複も発生してしまうが、個別ディレクトリ内のみで完結
/// ②アプリの遷移先追加方法
/// 1.ナビゲーション用の固有名追加[routes.dart]
/// 2.ナビゲーション用の遷移追加[routes.dart]
/// 3.遷移するためのボタンを追加[home_screen.dart]
import 'package:flutter/material.dart';
import 'routes.dart';
import 'screens/home_screen.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
onGenerateTitle: (context) => 'Apps',
/// デバッグの際は以下をhomeScreen→○○に変更すればよい
initialRoute: RouteGenerator.homeScreen, // routes.dart依存
onGenerateRoute: RouteGenerator.generateRoute, // routes.dart依存
home: HomeScreen(),
);
}
}
routes.dart
추가
static const String xxx= '/xxx';
와case문case xxx:
부분import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'apps/simple_app/counter.dart';
import 'screens/home_screen.dart';
class RouteGenerator {
static const String homeScreen = '/';
/// 1.ナビゲーション用の固有名追加
static const String counter = '/counter';
RouteGenerator._() {}
static Route<dynamic> generateRoute(RouteSettings settings) {
switch (settings.name) {
/// 2.ナビゲーション用の遷移追加
case homeScreen:
return MaterialPageRoute(
builder: (_) => const HomeScreen(),
);
case counter:
return MaterialPageRoute(
builder: (_) => const Counter(),
);
// 該当しない場合エラー
default:
throw RouteException('Route not found');
}
}
}
class RouteException implements Exception {
final String message;
const RouteException(this.message);
}
home_screen.dart
import 'package:flutter/material.dart';
import '../routes.dart';
import '../widgets/app_button.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen();
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ListView(
children: <Widget>[
/// 3.遷移するためのボタンを追加
AppButton(
pushName: RouteGenerator.counter,
buttonText: 'Counter',
),
],
),
),
);
}
}
app_button.dart
Navigator.of(context)?.pushNamed()
import 'package:flutter/material.dart';
class AppButton extends StatelessWidget {
final String pushName;
final String buttonText;
const AppButton({this.pushName, this.buttonText});
Widget build(BuildContext context) {
return RaisedButton(
onPressed: () {
Navigator.of(context)?.pushNamed(pushName);
},
child: Text(buttonText),
);
}
}
counter.dart
삭제
void main() => runApp(MyApp());
, MyApp의 클래스 이름을 Counter// Copyright (c) 2019, the Dart project authors. Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.
import 'package:flutter/material.dart';
class Counter extends StatelessWidget {
const Counter();
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
실행 결과
Reference
이 문제에 관하여([Flutter] Navigator의 간단한 화면 마이그레이션 프로젝트를 위한 템플릿), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/iwaku/articles/2021-01-20-iwaku텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)