Code Monkey home page Code Monkey logo

flutter-in-practice's Introduction

Flutter in Practice

This project can be used as a starter for flutter app development, including a demo app for learning flutter components and a social video app named weiguan which is similar to TikTok. There is also an article Flutter 移动应用开发指南 for learning this project.

To students of course: 最新的实战项目目录结构已按照新版 干净架构最佳实践 进行了重构,目录结构调整较大。如想获取之前版本,可查看提交记录。

Dependent frameworks and packages

  1. Flutter
  2. cached_network_image
  3. carousel_slider
  4. cookie_jar
  5. dio
  6. flutter_redux
  7. functional_data
  8. image_picker
  9. injector
  10. json_annotation
  11. logging
  12. meta
  13. package_info
  14. provider
  15. redux
  16. redux_logging
  17. redux_persist
  18. redux_persist_flutter
  19. redux_thunk
  20. video_player
  21. build_runner
  22. flutter_launcher_icons
  23. functional_data_generator
  24. json_serializable

How to run

Install flutter sdk

Please refer to flutter official document Install.

Clone repository

git clone [email protected]:jaggerwang/flutter-in-practice.git && cd flutter-in-practice

Install dependent packages

flutter packages get

Connect a device or run a simulator

Connet your Android or iOS device to your computer or run a simulator using the following commands.

$ flutter emulators
2 available emulators:

9.0-1080p           • 9.0-1080p     • Google • android
apple_ios_simulator • iOS Simulator • Apple  • ios

...
$ flutter emulators --launch apple_ios_simulator

Run Flutter Demo

flutter run -t lib/demo/main.dart

Run Weiguan APP

flutter run -t lib/weiguan/mobile/main.dart

The video player can not work on iOS simulator, you should use an Android emulator or a real device.

Weiguan app needs a api service to get and post data. It use mock apis by default, but you can configure it to use a real REST or GraphQL api service. For development purpose, you should configure and run main file main_dev.dart.

Use Sanic in Practice REST api service.

  final container = WgContainer(WgConfig(
    enableRestApi: true,
    apiBaseUrl: 'http://localhost:8000',
  ));

Use Spring Boot in Practice REST api service.

  final container = WgContainer(WgConfig(
    enableRestApi: true,
    apiBaseUrl: 'http://localhost:8080',
  ));

Use Spring Boot in Practice GraphQL api service.

  final container = WgContainer(WgConfig(
    enableGraphQLApi: true,
    apiBaseUrl: 'http://localhost:8080',
  ));

Use Spring Cloud in Practice GraphQL api service.

This api service only support GraphQL protocol.

  final container = WgContainer(WgConfig(
    enableGraphQLApi: true,
    apiBaseUrl: 'http://localhost:8080',
  ));

This api service also support OAuth2 login at branch oauth2, you can enable OAuth2 login as following:

  final container = WgContainer(WgConfig(
    enableOAuth2Login: true,
    oAuth2Config: OAuth2Config(
      clientId: 'fip',
      redirectUrl: 'net.jaggerwang.fip:/login/oauth2/code/hydra',
      authorizationEndpoint: 'http://localhost:4444/oauth2/auth',
      tokenEndpoint: 'http://localhost:4444/oauth2/token',
      scopes: ['offline', 'user', 'post', 'file', 'stat'],
    ),
  ));

And you need create an OAuth2 client for this app.

hydra --endpoint 'http://localhost:4445/' clients create --id fip --name 'Flutter in Practice' --grant-types authorization_code,refresh_token --response-types token,code --scope offline,user,post,file,stat --token-endpoint-auth-method none --callbacks 'net.jaggerwang.fip:/login/oauth2/code/hydra'

Screenshots

flutter-in-practice's People

Contributors

jaggerwang avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

flutter-in-practice's Issues

运行不成功

CocoaPods' output:

[!] Invalid `Podfile` file: no implicit conversion of nil into String.

 #  from /Users/sean/code/flutter/flutter-in-practice/ios/Podfile:54
 #  -------------------------------------------
 #      unless File.exist?(copied_framework_path)
 >        FileUtils.cp_r(File.join(cached_framework_dir,
 'Flutter.framework'), copied_flutter_dir)
 #      end
 #  -------------------------------------------

/Library/Ruby/Gems/2.6.0/gems/cocoapods-core-1.10.1/lib/cocoapods-core/podfi
le.rb:318:in `rescue in block in from_ruby'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-core-1.10.1/lib/cocoapods-core/podfi
le.rb:312:in `block in from_ruby'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-core-1.10.1/lib/cocoapods-core/podfi
le.rb:50:in `instance_eval'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-core-1.10.1/lib/cocoapods-core/podfi
le.rb:50:in `initialize'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-core-1.10.1/lib/cocoapods-core/podfi
le.rb:310:in `new'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-core-1.10.1/lib/cocoapods-core/podfi
le.rb:310:in `from_ruby'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-core-1.10.1/lib/cocoapods-core/podfi
le.rb:276:in `from_file'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/config.rb:205:i
n `podfile'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/command.rb:160:
in `verify_podfile_exists!'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/command/install
.rb:46:in `run'
/Library/Ruby/Gems/2.6.0/gems/claide-1.0.3/lib/claide/command.rb:334:in
`run'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/command.rb:52:i
n `run'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/bin/pod:55:in `<top
(required)>'
/usr/local/bin/pod:23:in `load'
/usr/local/bin/pod:23:in `<main>'

Error output from CocoaPods:

/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/un
iversal-darwin20/rbconfig.rb:229: warning: Insecure world writable dir
/usr/local/sbin in PATH, mode 040777

weiguan部分container.dart报错

错误信息
Launching lib/weiguan/main.dart on Redmi K20 Pro in debug mode...
/D:/fluttersdk/flutter/.pub-cache/hosted/pub.flutter-io.cn/dio-2.2.2/lib/src/dio_http_headers.dart:55:8: Error: The method 'DioHttpHeaders.add' has fewer named arguments than those of overridden method 'HttpH
eaders.add'.
void add(String name, value) {
^
org-dartlang-sdk:///third_party/dart/sdk/lib/_http/http.dart:698:8: Context: This is the overridden method ('add').
void add(String name, Object value,
^
/D:/fluttersdk/flutter/.pub-cache/hosted/pub.flutter-io.cn/dio-2.2.2/lib/src/dio_http_headers.dart:70:8: Error: The method 'DioHttpHeaders.set' has fewer named arguments than those of overridden method 'HttpH
eaders.set'.
void set(String name, Object value) {
^
org-dartlang-sdk:///third_party/dart/sdk/lib/_http/http.dart:707:8: Context: This is the overridden method ('set').
void set(String name, Object value,
^
lib/weiguan/container.dart:68:41: Error: The argument type 'Logger Function(dynamic)' can't be assigned to the parameter type 'Logger Function()'.

  • 'Logger' is from 'package:logging/src/logger.dart' ('/D:/fluttersdk/flutter/.pub-cache/hosted/pub.flutter-io.cn/logging-0.11.4/lib/src/logger.dart').
    _injector.registerSingleton((injector) {return Logger('app');}, dependencyName: 'app');
    ^
    lib/weiguan/container.dart:69:41: Error: The argument type 'Logger Function(dynamic)' can't be assigned to the parameter type 'Logger Function()'.
  • 'Logger' is from 'package:logging/src/logger.dart' ('/D:/fluttersdk/flutter/.pub-cache/hosted/pub.flutter-io.cn/logging-0.11.4/lib/src/logger.dart').
    _injector.registerSingleton((injector) {
    ^
    lib/weiguan/container.dart:72:41: Error: The argument type 'Logger Function(dynamic)' can't be assigned to the parameter type 'Logger Function()'.
  • 'Logger' is from 'package:logging/src/logger.dart' ('/D:/fluttersdk/flutter/.pub-cache/hosted/pub.flutter-io.cn/logging-0.11.4/lib/src/logger.dart').
    _injector.registerSingleton((injector) {
    ^
    lib/weiguan/container.dart:90:42: Error: The argument type 'WgTheme Function(dynamic)' can't be assigned to the parameter type 'WgTheme Function()'.
  • 'WgTheme' is from 'package:flutter_in_practice/weiguan/ui/theme.dart' ('lib/weiguan/ui/theme.dart').
    _injector.registerSingleton((injector) {
    ^
    lib/weiguan/container.dart:100:44: Error: The argument type 'AppState Function(dynamic)' can't be assigned to the parameter type 'AppState Function()'.
  • 'AppState' is from 'package:flutter_in_practice/weiguan/ui/redux/state/app.dart' ('lib/weiguan/ui/redux/state/app.dart').
    _injector.registerDependency((injector) {
    ^
    lib/weiguan/container.dart:112:50: Error: The argument type 'Store Function(dynamic)' can't be assigned to the parameter type 'Store Function()'.
  • 'Store' is from 'package:redux/src/store.dart' ('/D:/fluttersdk/flutter/.pub-cache/hosted/pub.flutter-io.cn/redux-3.0.0/lib/src/store.dart').
  • 'AppState' is from 'package:flutter_in_practice/weiguan/ui/redux/state/app.dart' ('lib/weiguan/ui/redux/state/app.dart').
    _injector.registerSingleton<Store>((injector) {
    ^
    lib/weiguan/container.dart:122:49: Error: The argument type 'WeiguanService Function(dynamic)' can't be assigned to the parameter type 'WeiguanService Function()'.
  • 'WeiguanService' is from 'package:flutter_in_practice/weiguan/usecase/port/service/weiguan.dart' ('lib/weiguan/usecase/port/service/weiguan.dart').
    _injector.registerSingleton((injector) {
    ^
    lib/weiguan/container.dart:159:47: Error: The argument type 'UserUsecases Function(dynamic)' can't be assigned to the parameter type 'UserUsecases Function()'.
  • 'UserUsecases' is from 'package:flutter_in_practice/weiguan/usecase/user.dart' ('lib/weiguan/usecase/user.dart').
    _injector.registerSingleton((injector) {
    ^
    lib/weiguan/container.dart:163:47: Error: The argument type 'PostUsecases Function(dynamic)' can't be assigned to the parameter type 'PostUsecases Function()'.
  • 'PostUsecases' is from 'package:flutter_in_practice/weiguan/usecase/post.dart' ('lib/weiguan/usecase/post.dart').
    _injector.registerSingleton((injector) {
    ^
    lib/weiguan/container.dart:177:48: Error: The argument type 'BasePresenter Function(dynamic)' can't be assigned to the parameter type 'BasePresenter Function()'.
  • 'BasePresenter' is from 'package:flutter_in_practice/weiguan/adapter/presenter/base.dart' ('lib/weiguan/adapter/presenter/base.dart').
    _injector.registerSingleton((injector) {
    ^
    lib/weiguan/container.dart:185:48: Error: The argument type 'UserPresenter Function(dynamic)' can't be assigned to the parameter type 'UserPresenter Function()'.
  • 'UserPresenter' is from 'package:flutter_in_practice/weiguan/adapter/presenter/user.dart' ('lib/weiguan/adapter/presenter/user.dart').
    _injector.registerSingleton((injector) {
    ^
    lib/weiguan/container.dart:194:48: Error: The argument type 'PostPresenter Function(dynamic)' can't be assigned to the parameter type 'PostPresenter Function()'.
  • 'PostPresenter' is from 'package:flutter_in_practice/weiguan/adapter/presenter/post.dart' ('lib/weiguan/adapter/presenter/post.dart').
    _injector.registerSingleton((injector) {
    ^

FAILURE: Build failed with an exception.

  • Where:
    Script 'D:\fluttersdk\flutter\packages\flutter_tools\gradle\flutter.gradle' line: 904

  • What went wrong:
    Execution failed for task ':app:compileFlutterBuildDebug'.

Process 'command 'D:\fluttersdk\flutter\bin\flutter.bat'' finished with non-zero exit value 1

  • Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

  • Get more help at https://help.gradle.org

BUILD FAILED in 56s
Running Gradle task 'assembleDebug'...
Running Gradle task 'assembleDebug'... Done 58.5s
Exception: Gradle task assembleDebug failed with exit code 1

如何解决不同分辨率字体大小和尺寸大小同比缩放问题

拉了下代码研读了一遍,觉得结构还是比较清晰的,而且也解决了很多开发中的问题,赞。
就是有一个问题,在不同分辨率的手机上,尺寸和字体大小要怎么解决。iPhone 6上的尺寸都正常,在iPhone SE上就显得乱了。有没有什么优雅的结局方案?

示例代码运行问题

您好,我再照着代码敲的时候,遇到了一下问题:
描述:
在GridView 组件代码里,的横屏、竖屏判断的时候报错;我现在还没看到导航,所以每个界面单独引入到main里运行的,不知道报错和这里有没有关系。
错误如图:
image

代码如图:
image

import 'package:flutter/material.dart';

class GridViewCountPage extends StatelessWidget {
  Widget buildGrid(BuildContext context) {
    final orientation = MediaQuery.of(context).orientation;
    return GridView.count(
      crossAxisCount: 3, // 几列
      mainAxisSpacing: 4,
      crossAxisSpacing: 4,
      padding: EdgeInsets.all(4),
      childAspectRatio: 1,
      children: List.generate(
          30,
          (index) => GridTile(
                child: Image.asset(
                  'assets/middle-pic-${index + 1}.jpg',
                  fit: BoxFit.cover,
                ),
                footer: GridTileBar(
                  backgroundColor: Colors.black45,
                  title: Text('middle-pic-${index + 1}'),
                  subtitle: Text('123'),
                  trailing: Icon(
                    Icons.star,
                    color: Colors.red,
                  ),
                ),
              )),
    );
  }

  @override
  Widget build(BuildContext context) {
    // final orientation = MediaQuery.of(context).orientation;
    // MediaQuery.of(context).size.width;
    return MaterialApp(
      title: '1',
      home: Scaffold(
        appBar: AppBar(
          title: Text('GridViewCountPage'),
        ),
        body: Center(
          child: buildGrid(context),
        ),
      ),
    );
  }
}

没有运行起来,分为以下几步。

1、在执行 flutter packages get 时候提示如下:

Warning: You are using these overridden dependencies:
! analyzer 0.39.17 (1.3.0 available)
Running "flutter pub get" in flutter_download_demo... 960ms
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Warning
──────────────────────────────────────────────────────────────────────────────
Your Flutter application is created using an older version of the Android
embedding. It's being deprecated in favor of Android embedding v2. Follow the
steps at

https://flutter.dev/go/android-project-migration

to migrate your project.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
image

2、因为上一步没有成功,所以pod install 时候提示如下
Analyzing dependencies
[!] CocoaPods could not find compatible versions for pod "sqflite":
In Podfile:
sqflite (from .symlinks/plugins/sqflite/ios)

Specs satisfying the sqflite (from .symlinks/plugins/sqflite/ios) dependency were found, but they required a higher minimum deployment target.

[!] Automatically assigning platform iOS with version 8.0 on target Runner because no platform was specified. Please specify a platform for this target in your Podfile. See https://guides.cocoapods.org/syntax/podfile.html#platform.
image

请问我是否得去 https://flutter.dev/go/android-project-migration 升级一下?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.