nickowalcz
commented
3 years ago Recorded flutter basics to better understand how flutter connects to the back end. Imports: Allows for importing packages for additional functionality with package:flutter/~files
Pubspec.yaml in pubspec.yaml you can include other flutter imports and libraries( like the standard library in c++) In dependencies: flutter: you can import dependencies
Widgets: Every flutter app is a bunch of widgets(everything is a widget) UI building blocks(list with items, photos, etc)
Style: TreeInformation is stored in hierarchy with a root widget and all other widgets inheriting from it
Creating an app widget: To create an app widget(root widget) you need to create a widget object
Objects are created in classes
Ex: class MyApp extends StatelessWidget
Extends is a keyword for class inheritance(can only inherent from 1 class)
StatelessWidget is a flutter import that allows you to create your own widget
Must add a method to the StatelessWidget
Ex: Widget build( BuildContext: context) { return MaterialApp( home: Text() , );}
Context is a special object that is needed for the app to runBuildContext is a special flutter object inside of material.dart build() MUST return a Widget MaterialApp converts your widgets in an app widget that can be ran Text() is a built in widget that takes a string input
runApp(); is a function written by Flutter held in material.dart
Create a plan to display and store user data
Nick: So looking at the data store objects basically each object can have multiple relationships to another and vice versa. So let’s say we have a user object that has a one-to-one relationship with the artist object and vice versa. Each artist object can then have multiple other objects for genres. So our user object can connect to our artist object which connects with our genres objects which they chose
Accessing the Database: Login to aws, navigate to Admin UI On the left hand side under the set up tab, click on data You can see all created objects as well as add a new object The value can be changed to any type
Downloading amplify storage: Check if amplify cli is downloaded(if not download it by) Install the amplify cli with: npm install -g @aws-amplify/cli Run: amplify init In the top right corner click Local setup instructions Copy the command( should look something like: amplify pull ~other stuff~ Paste into terminal in android studio VS code -> flutter -> enter -> yes Double check the configuration file is inside of lib./models
Downloading datastore: If already initialized then skip Install the amplify cli with: npm install -g @aws-amplify/cli Run: amplify init Run npm install @aws-amplify/datastore Inside of pubspec.yaml under dependencies and under sdk:flutter add: amplify_core: ‘<1.0.0’ amplify_datastore: ‘<1.0.0’
Initializing imports: Required imports for storage inside main.dart: import 'package:flutter/material.dart'; import 'amplifyconfiguration.dart'; import 'models/ModelProvider.dart'; import 'models/[name_of_object_file].dart'; import 'package:amplify_core/amplify_core.dart'; import 'package:amplify_datastore/amplify_datastore.dart';
As well as any other imports for cognito or Figma There can be multiple object files to import from models/
Double Check if running correct ios: Inside of ios./Flutter/Podfile: Uncomment the second line that contains: platform :ios, '9.0' Make sure whatever is inside the quotes is a ‘14.0’ like: platform :ios, '14.0'
Understanding Storage Objects:(Not sure if 100% correct) Log into AWS amplify and navigate to Fig2Flutterv01 under AWS amplify tab Open the admin ui inside of dev Navigate to data This contains our default Object, called Obj, as well as Blog, Post, and Comment Blog is at the top of our hierarchy, as both Post and Comment instantiate Blog objects Our Blog object has 2 types, and id field as well as a string field ID: stores a unique identifier for this field(not changeable) String! : stores the data related to this object(! Means required field) A Post object can have many Blog objects Obj has AWS instantiates itself so nothing is required there ModelProvider.dart contains these data objects and instantiates all of them and choses which object to use via a switch statement(if missing skip to step 6) Double check that ModelProvder.dart and all of its objects contains Import 'package:amplify_datastore_plugin_interface/amplify_datastore_plugin_interface.dart'; Navigate to amplify/backend/{api_name}/ and open the file schema.graphql Check that all types are the same as defined in AWS data modeling Run: amplify codegen models if missing from amplify/generated/models/
Relationships Each object can relate to another objects in multiple ways: One-to-one One-to-many Many-to-many Each object can have a different relationship with another Can be one-to-one one direction and many-to-one the other direction
Using datastore to create objects:
Inside of class _myAppState extends State
Create instance of amplify with: final _amplify = Amplify();
Inside of void _configureamplify():
Add all desired plugins for cogntio, etc…
Add plugins for storage ie:
Create an instance of the datastore plugin
Inside of lib./models./ModelProvider.dart:
Import