Intro to Flutter
1.0.0
이미 안드로이드를 알고있는 사람들을 위해 :
UI- Android는 XML 통합이 필요하지만 모든 것은 Flutter의 위젯이며 단일 파일로 만들 수 있습니다.
청취자는 더 이상 청취자가 on 클릭에 대한 청취자가없고, 방법을 호출하고, 상태를 바꾸고,보기를 즐기십시오.
findView- 없음 더 이상 findViewById () - 위젯 () {} 내부에서 모든 것을 수행하고 그 결과를 안드로이드에 맡깁니다.
Gradle- 더 이상 Gradle 문제 없음 - pubspec.yaml 파일에 종속성을 추가하고 새 라이브러리를 사용하려면 응용 프로그램을 새로 고침
자산 - 플러터에서 별도로 관리해야합니다. 예를 들어 이미지, 글꼴과 같은 모든 것을 선언해야합니다. Android에서는 파일 섹션에 추가하여 사용할 수 있습니다.
애니메이션은 플러터에서 훨씬 쉽고 지원됩니다 - 기본 용도 - 예 : 스플래시 활동, 스 와이프 탭, 결과, 분석 페이지, 내비게이션
앱 실행 -Flut Android Studio는 각 재 장전마다 최대 20-30 초가 걸릴 수 있으며 Gradle 문제가있는 경우 더 많은 경우에도 한 번씩 팝업됩니다.
API- Android API는 GSON을 사용하는 Retrofit과 같은 다른 라이브러리로 수행 할 수 있지만 Flutter에서의 가져 오기는 통증없이 수행 할 수 있습니다. 일반적인 페치 함수는 플러터에 사용될 수 있으며 API를 호출하는 비동기 대기 방법을 가질 수 있습니다.
Recycler/List View -Recycler보기는 Android에서 사용하여 화면에서 다른 목록을 작성합니다. 인터페이스가있는 어댑터가 필요하며이를 완전히 구현하려면 모든 종류의 다양한 기능을 알아야합니다. Flutter에는 다른 목록을 정의하거나 동적으로 물건을 추가 할 수있는 ListView를위한 위젯이 있습니다. 훨씬 쉽고, 더 간단하게 보입니다.
학습 곡선 - JavaScript와 유사한 DART를 알고 위젯에 대한 기본 개념을 이해하면 플러터에서 작업하는 것이 더 쉽습니다. Android를 사용하면 제약 레이아웃을 만드는 데 사용할 수있는 디자이너의 도움으로 레이아웃을 만들 수 있습니다. Android에서 기본 응용 프로그램을 쉽게 배우기가 더 쉽지만 조각과 다른 것들이 더 깊어지면서 복잡해지기 시작합니다.
파편 vs 구성 요소 (위젯) - Android에서 만든 조각과 달리 원하는 곳에 위젯 구성 요소를 사용할 수 있습니다.이 파편과 달리 번들, 어댑터, XML 레이아웃 및 OnCreateView 및 LayoutInflator와 같은 다양한 방법에 대한 지식이 필요합니다.
SQL 데이터베이스 - 두 기술 모두에서 매우 유사합니다. 유일한 차이점은 연속적으로 무언가를 추가하려고한다면 상태 관리가 시작될 수 있다는 것입니다. 상태에 키를 저장하고 setState () {_ key+= 1} -> 사용 케이스 만 사용하여 변경해야합니다. 안드로이드의 룸 라이브러리는 매우 넓고 구현하기 쉽습니다.
아키텍처 패턴 - 모든 것이 Android의 MVP/ MVVM/ MVC로 요약되는 반면, Flut
코드 편집기 -VScode/Android Studio- Android 용 Flutter 및 Android Studio
시작 가이드 - 안드로이드를위한 Pretty Straighforward, 스튜디오를 다운로드하고 시작하는 반면, 플러터를 위해 많은 일을해야합니다.
Firebase- 플러터 파이어베이스를위한 리소스 : -
https://firebase.google.com/docs/flutter/setup
https://flutter.dev/docs/development/data-and-backend/firebase
https://www.youtube.com/watch?v=8M-FA239HY4
https://www.youtube.com/channel/ucftm1fgjskospdzgtbp7ha/search?query=firebase
https://codelabs.developers.google.com/codelabs/flutter-firebase/#0
Firebase Connection - Flut 기본 사항은 동일합니다. .json 파일이 필요하며 Firebase 콘솔에 추가해야합니다. 플러터로 코딩하면 훨씬 더 나은 방법으로 이해하는 데 도움이됩니다. 전반적으로 비슷합니다.
Lists + Firebase -Android는 모든 것을 어렵게 만드는 미친 재활용기보기를 가지고 있으며 Firebase + Recycler View는 약 200 개의 기사를 가지고 있으며, 마스터 할 수는 없습니다. 튜토리얼없이 Android에서 무언가를 구현할 수있는 방법은 없었지만 Flutter에서는 언제든지 시도 할 수 있습니다.
Fetching, Pushing Data- Flutter Firebase에서는 데이터를 푸시하는 것이 더 쉽습니다. 문자 그대로 데이터의 스냅 샷을 보낼 수있는 Ontap () 메소드가 있습니다.
머신 러닝 - 머신 러닝 통합
UI- Flutter 및 RN에는 규칙과 UI를 정의하는 파일 시스템이 하나 있습니다. 나는 개인적으로 더 정의 된 Flutter Apps의 인터페이스를 좋아합니다. 또한 Android를 소유하고 Google과 훨씬 더 나은 통합을 가질 수있는 Google에서 유지 관리합니다.
클래스 - Flutter는 문자 그대로 모든 것에 위젯을 사용합니다. TextViews에서 Tabviews에 이르기까지 '위젯'이라고합니다. Flutter는 DART를 사용하는 반면 React Native는 TypeScript 또는 JavaScript를 사용합니다.
구성 요소 -RN에는 구성 요소가 있으며이를 사용하려면 'RECT -Native'에서 가져와야합니다. 플러터에는 비슷한 공간에서 사용할 수있는 위젯이 있습니다. 스타일링과 렌더링 부분을 제외하고 둘 다 비슷합니다.
스타일링 플러터 - 내부 위젯 - 패딩을 원한다면 패딩 => 패드 딩 () 위젯에서 위젯을 랩핑하고 네이티브를 반응합니다. Const 스타일을 정의하고 스타일을 추가하여 CS가있는 웹 스타일과 비슷합니다. 따라서 React Native에는 CSS 스타일이 있지만 Flutter에는 '위젯'스타일이 있습니다.
애니메이션 - Flutter는 GrasB가 훨씬 쉽고 React Native는 더 넓은 측면을 가지고 있습니다.
학습 곡선 - React Native 및 Flutter에서 유사합니다.
라이브러리 -NPM은 원시를 반응하는 데 도움이되는 반면 플러터의 경우 PubSpec.yaml 파일에 추가합니다.
API- 둘 다 API 사용에 대한 명확한 비전이 있습니다. RN-https://medium.com/better-programming/handling-api-like-a-boss-in-react-native-364abd92dc3d에 대한 좋은 기사
코드 편집기 - 대 코드는 두 가지 모두에 인기가 있습니다
시작하기 - 개인적으로, Windows의 React Native와 함께 일하는 것은 정말 어려웠습니다. Mac을 사용하면 훨씬 좋습니다. 그러나 전반적으로 빨간색 화면이 당신을 많이 괴롭 힙니다. Flutter는 가장 쉬운 시작 가이드가 없지만 도움이되는 지원이 있습니다.
전반적으로 - 둘 다 크로스 네이티브 앱을 만들 수 있으며 언제든지 Flut
fetch () async {
var url = "API-HERE" ;
var res = await http. get (url);
var body = jsonDecode (res.body);
// body is your API body
}content description 과 같은 것들을 추가 할 수 있습니다. https://steemit.com/utopian-io/@tensor/advanced-flutter-project---seneric-bloc-providers--part-three
class App extends StatelessWidget {
@override
Widget build ( BuildContext context) {
// TODO: implement build
return MaterialApp (
home : Home (),
theme : ThemeData (primaryColor : PrimaryColor ), //add-your-color here || or remove this
debugShowCheckedModeBanner : false ,
);
}
}
class Home extends StatefulWidget {
@override
State < StatefulWidget > createState () {
// TODO: implement createState
return new _HomeState ();
}
}
class _HomeState extends State < Home >{
@override
Widget build ( BuildContext context) {
return Scaffold (
body : Column ()
);
}child : users.length <= 0
? Center (
child : EmptyState (
title : 'Oops' ,
message : 'Add form by tapping add button below' ,
),
)
: ListView . builder (
addAutomaticKeepAlives : true ,
itemCount : users.length,
itemBuilder : (_, i) => users[i],
),
) fetch () async {
var url = "API-HERE" ;
var res = await http. get (url);
var body = jsonDecode (res.body);
// body is your API body
} for ( int i = 0 ;i < body[ 0 ][ 'staggered_tiles' ].length;i ++ ){
_staggeredTiles. add ( new StaggeredTile . count (
body[ 0 ][ 'staggered_tiles' ][i][ 'cross_axis' ], // body is what we get from the API
body[ 0 ][ 'staggered_tiles' ][i][ 'main_axis' ] // body is what we get from the API
));
}
if (body[i][ 0 ][ 'type' ] == 'donut' ) {
List < LabelPieSales > _d = [];
for ( int j = 0 ; j < body[i][ 0 ][ 'data' ].length; j ++ ) {
_d. add ( new LabelPieSales (
body[i][ 0 ][ 'data' ][j][ 'year' ], body[i][ 0 ][ 'data' ][j][ 'sales' ])); // body is what we get from the API
}
_wid_top. add ( new Container (
height : 200 ,
width : 200 ,
child : DonutChartWidget . withSampleData (_d),
));
}
else if (body[i][ 0 ][ 'type' ] == 'label-pie' ) {
List < LabelPieSales > _d = [];
for ( int j = 0 ; j < body[i][ 0 ][ 'data' ].length; j ++ ) {
_d. add ( new LabelPieSales (
body[i][ 0 ][ 'data' ][j][ 'year' ], body[i][ 0 ][ 'data' ][j][ 'sales' ])); // body is what we get from the API
}
_wid_top. add ( new Container (
height : 200 ,
width : 200 ,
child : SimpleBarChart . withSampleData (_d),
));
} return Container (
padding : const EdgeInsets . all ( 4.0 ),
child : appState.isFetching
? CircularProgressIndicator ()
: appState. getResponseJson () != null
? ListView . builder (
primary : false ,
shrinkWrap : true ,
itemCount : appState. getResponseJson ().length,
itemBuilder : (context, index) {
return Container (
height : 100 ,
width : 100 ,
child : graph (appState. getResponseJson ()),
);
},
)
: Text ( "Press Button above to fetch data" ),
); initDB () async {
return await openDatabase (
join ( await getDatabasesPath (), 'graphs_database.db' ),
onCreate : (db, version) {
return db. execute (
"CREATE TABLE graphs(id INTEGER PRIMARY KEY, type TEXT)" ,
);
},
version : 1 ,
);
}floatingActionButton : FloatingActionButton (
child : Icon ( Icons .add),
onPressed : () async {
Dog dog = new Dog (id : _id, name : "name" ,age : 22 );
await insertDog (dog);
setState (() {
_id += 1 ;
});
},
), List < Graph > graphs_sql = await graphs ();
List < String > graphs_sql_types = [];
for ( int i = 0 ;i < graphs_sql.length;i ++ ){
graphs_sql_types. add (graphs_sql[i].type);
}
if (graphs_sql.length != _types.length) {
for ( int i = 0 ; i < _types.length; i ++ ) {
if ( ! graphs_sql_types. contains (_types[i])){ // add only if a new type
await insertGraph ( new Graph (id : i, type : _types[i]));
}
}
} launchUrl () {
setState (() {
urlString = controller.text;
flutterWebviewPlugin. reloadUrl (urlString);
});
} class News {
String dateAdded;
String title;
String body;
String level;
String category;
News ( this .dateAdded, this .title, this .body, this .level, this .category);
}
class Record {
final String name;
final int votes;
final DocumentReference reference;
Record . fromMap ( Map < String , dynamic > map, { this .reference})
: assert (map[ 'name' ] != null ),
assert (map[ 'votes' ] != null ),
name = map[ 'name' ],
votes = map[ 'votes' ];
Record . fromSnapshot ( DocumentSnapshot snapshot)
: this . fromMap (snapshot.data, reference : snapshot.reference);
@override
String toString () => "Record<$ name :$ votes >" ;
} double _height = MediaQuery . of (context).size.height;
double _width = MediaQuery . of (context).size.width; @override
void initState () {
// TODO: implement initState
super . initState ();
_image = {url};
localList1 = globalList1;
localList1 = globalList2;
} export const sendToTopic = functions.firestore
.document( 'recipes/{recipyId}' )
.onCreate(async snapshot => {
// const recipe = snapshot.data();
const payload : admin.messaging.MessagingPayload = {
notification: {
title: 'new recipe added, check it out' ,
body: 'Make it and eat it'
}
};
return fcm. sendToTopic ( 'recipes' , payload);
}); @override
Widget build ( BuildContext context) {
return Scaffold (
appBar : AppBar (title : Text ( 'Recipes for you' )),
body : _buildBody (context),
);
}
Widget _buildBody ( BuildContext context) {
return StreamBuilder < QuerySnapshot >(
stream : Firestore .instance. collection ( 'recipes' ). snapshots (),
builder : (context, snapshot) {
if ( ! snapshot.hasData) return LinearProgressIndicator ();
return _buildList (context, snapshot.data.documents);
},
);
} List<Recipe> recipe_list = [];
// snapshot.map((data) => recipeList(context, data).toList());
for(int i=0;i<snapshot.length;i++){
Recipe recipe = Recipe.fromSnapshot(snapshot[i]);
recipe_list.add(recipe);
}
return AsymmetricView(products: recipe_list,);
