apiKey

Find its value from the `firebase_options.dart` file and paste here.

appId

messagingSenderId

projectId

authDomain

storageBucket

iosClientId

iosBundleId

measurementId

Gain insights into using Flutter and Dart to build visually stunning, high-performance Android and iOS apps. Delve into UI/UX design, networking, state management, Firebase, testing, and deployment.

hello.tar.gz

Flutter_Web

Flutter_Web-copy

Flutter_Web-Firebase

Flutter_Web_build_runner

Flutter_Web_Testing

Flutter_API_Server

Flutter_API_Server-copy

Get ready to unlock the potential of Flutter and Dart as you learn to craft visually stunning and high-performance applications for both Android and iOS.

This course will teach you to plan, build, and deploy interactive Flutter applications. You’ll start by developing user interfaces and handling gestures. Next, you’ll explore navigation and routing to smoothly move around your app. You’ll then dive into networking and HTTP to connect your app to the internet and implement data persistence. You’ll use Firebase services for authentication and storing data. State management comes next, helping you manage the different pieces of your app efficiently. Then, you’ll focus on testing, analytics, and crash reporting. You’ll then explore accessibility and internationalization, making your app usable by everyone and suitable for different languages. Lastly, you’ll learn app deployment.

The course wraps up with a project: you will create an online furniture store, combining all the skills you’ve learned.

The Complete Guide to Flutter

 

# Goal
In this challenge, you’ll listen to Bitcoin transactions from the [WebSocket API server](https://www.blockchain.com/api/api_websocket) and practice what you’ve learned previously.

# Specs

When you run your app and navigate to "Realtime Transactions," a list of transactions streams in, as shown below:


# Starter code
Before you begin the challenge, look at the starter code below and run it.
Once done, you can dive into the challenges below. 

name: bitcoin_app
description: A new Flutter application.

publish_to: 'none' # Remove this line if you wish to publish to pub.dev
version: 1.0.0+1

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.4
  http: ^0.13.4
  intl: ^0.17.0
  # TODO-1: Add package

dev_dependencies:
  build_runner: ^2.1.7
  flutter_test:
    sdk: flutter
  flutter_lints: ^1.0.4

flutter:
  uses-material-design: true
  assets:
    - assets/images/


import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

# Challenges


## Challenge 1: Connect to a WebSocket server
In this challenge, you will make a successful connection to the WebSocket API server.

1. Locate `# TODO-1: Add package` in the `pubspec.yaml` file and add the [`web_socket_channel`](https://pub.dev/packages/web_socket_channel) package. 
2. Locate ` // TODO-2: Create channel variable` in the `lib/presentation/transactions_screen.dart` file and create the `WebSocketChannel` channel variable. Add a `late` modifier to the variable.
3. Locate ` // TODO-3: Connect to server` in the `lib/presentation/transactions_screen.dart` file and assign the channel variable with a connection to the WebSocket API server. 

> **Note:** The connection URL is `wss://ws.blockchain.info/inv`.

## Challenge 2: Listen for messages
In this challenge, you will listen to the stream of messages sent by the server. 



1. The WebSocket API requires you to subscribe to the transactions. Locate `// TODO-4: Subscribe to transactions` in the `lib/presentation/transactions_screen.dart` file and subscribe to notifications for all new Bitcoin transactions. 
The subscription is done within the `initState()` life cycle method.

> **Note:** To subscribe to the transactions, you have to send the `'{"op": "unconfirmed_sub"}'` message to the WebSocket server, after which the transactions will start streaming in.

2. Set the `StreamBuilder` widget's stream to be the WebSocket channel stream. Locate `// TODO-5: Add channel stream` in the `lib/presentation/transactions_screen.dart` file and add the channel stream.

3. Locate `// TODO-5:Call getLatestTransactions with snapshot data` in the `lib/presentation/transactions_screen.dart` file and call the `getLatestTransactions` method with snapshot data. 

> **Note:** The `getLatestTransactions` function modifies the data stream. You can obtain the total transaction amount in Bitcoin by adding the `x.out` array `value` and then dividing the sum by 100,000,000. Since the API sends one transaction at a time, we add them to the `latestTransactions` list in reverse order so that the latest transaction appears first. Refer to the [API documentation](https://www.blockchain.com/api/api_websocket) for the response structure. You only display the transaction hash, time, and Bitcoin amount.


## Challenge 3: Close your connection to the WebSocket server

In this challenge, you'll close the connection to the server.


1. Locate ` // TODO-6: Unsubscribe to transactions` in the `lib/presentation/transactions_screen.dart` file and unsubscribe to notifications for all new Bitcoin transactions.

> To unsubscribe to the transactions, you have to send the `'{"op": "unconfirmed_unsub"}'` message to the WebSocket server.

2. Locate ` // TODO-7: Close connection` in the `lib/presentation/transactions_screen.dart` file and close the server connection.


Run your app and ensure it meets the specs mentioned above.



Test your understanding of working with WebSocket.

Introduction

User Interface

Navigation and Routing

Networking and HTTP

Persisting Data

State Management

Firebase for Flutter

Essential Tools to Enhance Your Flutter Workflow

Quality Assurance

Accessibility and Internalization

Deployment

Project: Build an Online Furniture Store

Next Steps

Challenge: Real-Time Bitcoin Transactions

Goal