Hilarious Marcus Naus Martial Art Jokes: API-Powered Comedy with Flutter Flow !Make your App and Earn🥋🤖

I have to add and select the things which features. I need to require for making my application.

I basically used the free API which helps me to get and fetch the information.

Some ScreenShots:-

Just for your understanding, I have added the code for more clarity.

Code irrespective:-

import '/backend/api_requests/api_calls.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:provider/provider.dart';

import 'home_page_model.dart';
export 'home_page_model.dart';

class HomePageWidget extends StatefulWidget {
  const HomePageWidget({Key? key}) : super(key: key);

  @override
  _HomePageWidgetState createState() => _HomePageWidgetState();
}

class _HomePageWidgetState extends State<HomePageWidget> {
  late HomePageModel _model;

  final scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  void initState() {
    super.initState();
    _model = createModel(context, () => HomePageModel());
  }

  @override
  void dispose() {
    _model.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => FocusScope.of(context).requestFocus(_model.unfocusNode),
      child: Scaffold(
        key: scaffoldKey,
        backgroundColor: FlutterFlowTheme.of(context).primaryBackground,
        appBar: AppBar(
          backgroundColor: FlutterFlowTheme.of(context).primary,
          automaticallyImplyLeading: false,
          title: Text(
            'Random Jokes',
            style: FlutterFlowTheme.of(context).headlineMedium.override(
                  fontFamily: 'Outfit',
                  color: Colors.white,
                  fontSize: 22,
                ),
          ),
          actions: [],
          centerTitle: false,
          elevation: 2,
        ),
        body: SafeArea(
          top: true,
          child: Column(
            mainAxisSize: MainAxisSize.max,
            children: [
              FutureBuilder<ApiCallResponse>(
                future: JokesCall.call(),
                builder: (context, snapshot) {
                  // Customize what your widget looks like when it's loading.
                  if (!snapshot.hasData) {
                    return Center(
                      child: SizedBox(
                        width: 50,
                        height: 50,
                        child: CircularProgressIndicator(
                          valueColor: AlwaysStoppedAnimation<Color>(
                            FlutterFlowTheme.of(context).primary,
                          ),
                        ),
                      ),
                    );
                  }
                  final containerJokesResponse = snapshot.data!;
                  return Container(
                    width: 380,
                    height: 100,
                    decoration: BoxDecoration(
                      color: FlutterFlowTheme.of(context).secondaryBackground,
                    ),
                    child: Align(
                      alignment: AlignmentDirectional(0, 0),
                      child: FutureBuilder<ApiCallResponse>(
                        future: JokesCall.call(),
                        builder: (context, snapshot) {
                          // Customize what your widget looks like when it's loading.
                          if (!snapshot.hasData) {
                            return Center(
                              child: SizedBox(
                                width: 50,
                                height: 50,
                                child: CircularProgressIndicator(
                                  valueColor: AlwaysStoppedAnimation<Color>(
                                    FlutterFlowTheme.of(context).primary,
                                  ),
                                ),
                              ),
                            );
                          }
                          final textJokesResponse = snapshot.data!;
                          return Text(
                            getJsonField(
                              textJokesResponse.jsonBody,
                              r'''$.value''',
                            ).toString(),
                            style: FlutterFlowTheme.of(context)
                                .bodyMedium
                                .override(
                                  fontFamily: 'Readex Pro',
                                  fontSize: 16,
                                  fontWeight: FontWeight.bold,
                                ),
                          );
                        },
                      ),
                    ),
                  );
                },
              ),
              ClipRRect(
                borderRadius: BorderRadius.circular(8),
                child: Image.network(
                  'https://picsum.photos/seed/542/600',
                  width: 437,
                  height: 632,
                  fit: BoxFit.cover,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Here’s a breakdown of what the code does:

1. The `HomePageWidget` is a stateful widget that defines the app’s home page.

2. In the `initState` method, the `HomePageModel` is created using the `createModel` function. This model seems to be responsible for managing the state of the home page.

3. The `dispose` method is overridden to properly dispose of the model when the widget is removed from the tree.

4. The `build` method returns the UI of the home page. It consists of a `Scaffold` widget with an `AppBar` and a `body`.

5. Inside the `body`, there is a `FutureBuilder` that fetches a joke using the `JokesCall.call()` function. While the data is being fetched, a loading indicator is displayed.

6. Once the joke data is available, it’s displayed in a `Container` with a specific width and height. The joke text is extracted from the JSON response and displayed using the `Text` widget.

7. Below the joke container, there is an `Image.network` widget that displays an image fetched from the provided URL.

The code appears to be well-structured and follows the Flutter framework’s patterns for building UIs and handling asynchronous operations. If you have specific questions about parts of the code or need assistance with a particular aspect, feel free to ask!

Youtube Link:-https://youtu.be/ZEQLt36mVGA