Flutter

Flutter

• 1.
  Flutter Learn to buildnative mobile apps with Flutter. Dave Chao
• 2.
  Basic BLoC Restful GraphQL Agenda
• 3.
  Basic
• 4.
  Flutter System Overview GraphicsEngine
• 5.
  “Everything’s a Widget.
• 6.
  Describes the configuration foran Element. An instantiation of a Widget at a particular location in the tree. Handles size, layout, and painting. Flutter has three trees. Element - Lifecycle RenderObject - PaintWidget - Configure - https://www.youtube.com/watch?v=996ZgFRENMs
• 7.
  Lifecycle - StatelessWidget Don’t rebuild, and it is immutable, you can’t change the state of the widget. 1. createElement 2. build
• 8.
  Lifecycle - StatefulWidget Rebuild, It is mutable, and the state of the Widget can be changed and it will be notified when a state changed. 1. createState ● When creating StatefulWidget, it will be called. 2. initState ● Only be called once. 3. didChangeDependencies ● After initState, it will be called. ● When the InheritedWidget changes, it will be called. 4. build
• 9.
  Lifecycle - StatefulWidget 5. didUpdateWidget ● After build, it will be called. ● After hot reload, it will be called. ● If the parent widget calls setState(), the child widget's didUpdateWidget will be called. 6. setState ● Call setState, build and redraw. 7. build 8. deactivate ● It will only be called when the State Widget is temporarily removed, such as the page is changed. 9. dispose ● The State Widget will only be called when it is destroyed forever. Interact with Widget Remove widget or leave page
• 10.
  What seems tobe the problem? - https://flutter.dev/docs/development/data-and-backend/state-mgmt/options
• 11.
  BLoC
• 12.
  “BLoC make iteasy to separate presentation from business login, making your code fast, easy to test, and reusable. - https://bloclibrary.dev/#/
• 13.
  BLoC Widgets It isused as a DI widget so that a single instance of a bloc can be provided to multiple widgets within a subtree. BlocProvider
• 14.
  BLoC Widgets Handles buildingthe widget in response to new states. BlocBuilder
• 15.
  BLoC Widgets Invokes thelistener in response to state changes in the bloc, such as navigation, showing a SnackBar, showing a Dialog. BlocListener
• 16.
  Getting Started - Animation
• 17.
  Events enum AnimationEvent { idle, cover_eyes_in, cover_eyes_out, success, fail }
• 18.
  BLoC class AnimationBloc extendsBloc<AnimationEvent, String> { @override String get initialState => "idle"; @override Stream<String> mapEventToState(AnimationEvent event) async* { switch (event) { case AnimationEvent.idle: yield "idle"; break; case AnimationEvent.cover_eyes_in: yield "cover_eyes_in"; break; case AnimationEvent.cover_eyes_out: yield "cover_eyes_out"; break; case AnimationEvent.success: yield "success"; break; case AnimationEvent.fail: yield "fail"; break; }} } 在mapEventToState中, 定義Business Login Event與State的資料型態
• 19.
  UI class App extendsStatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: BlocProvider<AnimationBloc>( create: (context) => AnimationBloc(), child: LoginPage(), ), ); } } 建立AnimationBloc, 再透過 BlocProvider注入到LoginPage中
• 20.
  UI class LoginPage extendsStatefulWidget { @override _LoginPageState createState() => _LoginPageState(); } class _LoginPageState extends State<LoginPage> { AnimationBloc animationBloc; @override initState() { super.initState(); animationBloc = BlocProvider.of<AnimationBloc>(context); _passwordFocusNode.addListener(() { if (_passwordFocusNode.hasFocus) { animationBloc.add(AnimationEvent.cover_eyes_in); } }); } } ● 在LoginPage中, 透過BlocProvider.of 取得AnimationBloc ● 透過Bloc.add(Event Type), 告知Bloc, 依據不同的Event做不同的business logic
• 21.
  UI Widget _buildGuss() { returnBlocBuilder<AnimationBloc, String>(builder: (context, state) { return Container( height: 200, padding: EdgeInsets.only(left: 30.0, right: 30.0), child: FlareActor( "assets/Guss.flr", shouldClip: false, alignment: Alignment.topCenter, fit: BoxFit.cover, animation: state, ), ); }); } 透過BlocBuilder監聽Bloc的state, 依據不同的state, 繪製不同的view
• 22.
  JSON Serializable
• 23.
  JSON Serializable part 'login_item.g.dart'; @JsonSerializable(nullable:false) class LoginItem { @JsonKey(name: "accessToken") String accessToken; @JsonKey(name: "expiresIn") int expiresIn; @JsonKey(name: "refreshExpiresIn") int refreshExpiresIn; @JsonKey(name: "refreshToken") String refreshToken; LoginItem(this.accessToken, this.expiresIn, this.refreshExpiresIn, this.refreshToken); factory LoginItem.fromJson(Map<String, dynamic> json) => _$LoginItemFromJson(json); Map<String, dynamic> toJson() => _$LoginItemToJson(this); } Generate Code: flutter packages pub run build_runner build
• 24.
  JSON Serializable part of'login_item.dart'; // ************************************************************************** // JsonSerializableGenerator // ************************************************************************** LoginItem _$LoginItemFromJson(Map<String, dynamic> json) { return LoginItem( json['accessToken'] as String, json['expiresIn'] as int, json['refreshExpiresIn'] as int, json['refreshToken'] as String, ); } Map<String, dynamic> _$LoginItemToJson(LoginItem instance) => <String, dynamic>{ 'accessToken': instance.accessToken, 'expiresIn': instance.expiresIn, 'refreshExpiresIn': instance.refreshExpiresIn, 'refreshToken': instance.refreshToken, };
• 25.
  Restful
• 26.
  “Dio is apowerful Http client, which supports Interceptors, Global configuration, FormData, Request Cancellation, File downloading, Timeout. - https://pub.dev/packages/dio
• 27.
  Dio Init Dio dio =Dio(new BaseOptions( baseUrl: ‘https://api.xyzabc.com/’, connectTimeout: 5000, receiveTimeout: 100000, contentType: ContentType.json.toString(), responseType: ResponseType.json, ));
• 28.
  Dio GET Future<BikeListItem> fetchBikes() async{ final response = await _dio.get("youbike"); return BikeListItem.fromJson(response.data); } POST Future<LoginItem> login(LoginRequest request) async { final response = await _dio.post( "v1/basicLogin", data: request, ); return LoginItem.fromJson(response.data["data"]); }
• 29.
  Interceptors dio.interceptors.add(InterceptorsWrapper( onRequest: (RequestOptions options)async { Fimber.d("headers: ${options.headers}"); Fimber.d("uri: ${options.uri}"); Fimber.d("data: ${options.data}"); Fimber.d("query: ${options.queryParameters}"); return options; }, onResponse: (Response response) async { return response; }, onError: (DioError e) async { return e; } )); Dio
• 30.
  Getting Started - Login
• 31.
  Events abstract class LoginEventextends Equatable { const LoginEvent(); } class Login extends LoginEvent { final LoginRequest request; Login(this.request); @override List<Object> get props => [request]; }
• 32.
  States class LoginState extendsEquatable { const LoginState(); @override List<Object> get props => []; } class Loading extends LoginState {} class DataEmpty extends LoginState {} class Error extends LoginState {} class Success extends LoginState { final LoginItem loginItem; Success([this.loginItem]) : assert(loginItem != null); @override List<Object> get props => [loginItem]; }
• 33.
  BLoC class LoginBloc extendsBloc<LoginEvent, LoginState> { final AccountRepository repository; LoginBloc({@required this.repository}); @override LoginState get initialState => Loading(); @override Stream<LoginState> mapEventToState(LoginEvent event) async* { if (event is Login) { try { yield Loading(); final loginItem = await repository.login(event.request); yield Success(loginItem); } catch (error) { Fimber.e("Error: $error"); yield Error(); } } } }
• 34.
  Repository class AccountRepository { Dio_dio; AccountRepository(Dio dio) { _dio = dio; } Future<LoginItem> login(LoginRequest request) async { final response = await _dio.post( "v1/login", data: request, ); Fimber.d("response.statusCode: ${response.statusCode}"); Fimber.d("response.data: ${response.data}"); return LoginItem.fromJson(response.data["data"]); } }
• 35.
  UI class App extendsStatelessWidget { @override Widget build(BuildContext context) { Config _config = ConfigProvider.of(context).config; return MaterialApp( debugShowCheckedModeBanner: false, home: MultiBlocProvider( providers: [ BlocProvider<LoginBloc>(create: (context) => LoginBloc(repository: AccountRepository(_config.dio))), BlocProvider<AnimationBloc>(create: (context) => AnimationBloc()), ], child: LoginPage(), ), ); } }
• 36.
  UI LoginBloc loginBloc =BlocProvider.of<LoginBloc>(context); onTap: () { if (_formKey.currentState.validate()) { final account = _accountController.text.toString(); final password = _passwordController.text.toString(); final request = LoginRequest("app.internal", account, password); loginBloc.add(Login(request)); } } BlocListener<LoginBloc, LoginState>( listener: (context, state) { if (state is Success) { _navigateToHomeScreen(); } else if (state is Error) { animationBloc.add(AnimationEvent.fail); } }
• 37.
  GraphQL
• 38.
  Init GraphQL Client GraphQLClient_initGraphQLClient() { final HttpLink _httpLink = HttpLink( uri: 'http://11.222.333.444:8888/graphql', headers: { Constant.X_GRAPH_AUTH: Constant.X_GRAPH_AUTH_VALUE, }, ); return GraphQLClient( cache: InMemoryCache(), link: _httpLink, ); }
• 39.
  Query const String readPodcasts= r''' query ReadPodcasts { podcast { id, artistName, name, artworkUrl100 } } ''';
• 40.
  Query Future<QueryResult> getPodCasts() async{ final QueryOptions _options = QueryOptions( documentNode: gql(queries.readPodCasts), ); return await client.query(_options); }
• 41.
  Mutation const String addUser= r''' mutation AddUser($name: String!) { id, name } ''';
• 42.
  Mutation Future<QueryResult> addUser(String name)async { final MutationOptions _options = MutationOptions( documentNode: gql(mutations.adduser), variables: <String, dynamic>{name: name}, ); return await client.mutate(_options); }
• 43.
  Getting Started - FetchCollections
• 44.
  Query Language const StringreadPodCastDetail = r''' query ReadPodCastDetail($collectionId: String!) { collection(id: $collectionId) { artistId, artistName, artworkUrl100, artworkUrl600, collectionId, collectionName, country, genreIds, genres, releaseDate, contentFeed { contentUrl, desc, publishedDate, title } } } ''';
• 45.
  Events abstract class CollectionEventextends Equatable { const CollectionEvent(); } class FetchPodCastDetail extends CollectionEvent { final String collectionId; FetchPodCastDetail(this.collectionId); @override List<Object> get props => [collectionId]; }
• 46.
  States class CollectionState extendsEquatable { const CollectionState(); @override List<Object> get props => []; } class Loading extends CollectionState {} class DataEmpty extends CollectionState {} class Error extends CollectionState {} class Success extends CollectionState { final PodCastDetailItem podCastDetailItem; Success([this.podCastDetailItem]) : assert(podCastDetailItem != null); @override List<Object> get props => [podCastDetailItem]; }
• 47.
  BLoC class CollectionBloc extendsBloc<CollectionEvent, CollectionState> { final PodCastRepository repository; CollectionBloc({@required this.repository,}); @override CollectionState get initialState => Loading(); @override Stream<CollectionState> mapEventToState(CollectionEvent event) async* { if (event is FetchPodCastDetail) { try { final result = await repository.getPodCastDetail(event.collectionId); final podCastDetailItem = PodCastDetailItem.fromJson(result.data); yield Success(podCastDetailItem); } catch (error) { Fimber.e("Error: $error"); yield Error(error); } } } }
• 48.
  Repository class PodCastRepository { finalGraphQLClient client; PodCastRepository({@required this.client}) : assert(client != null); Future<QueryResult> getPodCasts() async { final QueryOptions _options = QueryOptions(documentNode: gql(queries.readPodCasts),); return await client.query(_options); } Future<QueryResult> getPodCastDetail(String collectionId) async { final QueryOptions _options = QueryOptions( documentNode: gql(queries.readPodCastDetail), variables: <String, dynamic>{'collectionId': collectionId}, ); return await client.query(_options); } }
• 49.
  UI CollectionBloc bloc =BlocProvider.of<CollectionBloc>(context); bloc.add(FetchPodCastDetail(widget.collectionId)); BlocBuilder<CollectionBloc, CollectionState>( builder: (context, state) { if (state is Success) { final collectionItem = state.podCastDetailItem.collectionItem; return Column( children: <Widget>[ _buildCastDetail(collectionItem), SizedBox(height: 16.0), _buildTitle(), _buildContentFeed(collectionItem) ], ); } else { return CustomerProgressIndicator(); } }
• 50.
  Podcasts App - https://github.com/davechao/podcast_app
• 51.
  Thanks! Does anyone haveany questions?