Issue with Api Calls for Launch URL action and Image box that uses Base64 string

[hughCar389]

Can we access your project?

• [X] I give permission for members of the FlutterFlow team to access and test my project for the sole purpose of investigating this issue.

Current Behavior

The image is supposed to load the $.ProviderName , $.Link, and when the name of the provider is clicked it supposed to launch Urls from the $.Link variable. Sadly the only thing that works is the ProviderName.

Expected Behavior

The Column is supposed to load the $.ProviderName , $.Link, and when the name of the provider is clicked it supposed to launch Urls from the $.Link variable. Check the picture provided so see what it is supposed to look like.

Steps to Reproduce

1. Add Api
2. Add query parameters
3. response and test
4. add backend query to List view
5. generate children from variable
6. variable name is var_Physicians
7. Value is physician response --> json path --json body -->$.
8. add custom imagebox that converts list of base64 string to image path
9. add custom code and custom function
10. change widget to network path call custom function and use $.Pic as string

Reproducible from Blank

• [X] The steps to reproduce above start from a blank project.

Bug Report Code (Required)

ITFfkM/l7ZBgoctH176JKcJVvDgWH18cTeUzlO1hdwwbI+KvE7NzP+D8YhFtcuqHTX5tPlGbjk0D+db0ks71F/Y4KROtQNlewZB1UxDgTTmiVYyROrmKP3ZCO+RRGBGgy8GnoApAGLBtcVkjwV6XfPCQb3qCf9qOYwx5e6fDbOY=

Visual documentation

`import '/backend/api_requests/api_calls.dart'; import '/flutter_flow/flutter_flow_icon_button.dart'; import '/flutter_flow/flutter_flow_theme.dart'; import '/flutter_flow/flutter_flow_util.dart'; import '/flutter_flow/flutter_flow_widgets.dart'; import '/custom_code/actions/index.dart' as actions; import '/flutter_flow/custom_functions.dart' as functions; import 'package:flutter/material.dart'; import 'package:google_fonts/google_fonts.dart'; import 'package:provider/provider.dart';

import 'meet_the_surgeons_model.dart'; export 'meet_the_surgeons_model.dart';

class MeetTheSurgeonsWidget extends StatefulWidget { const MeetTheSurgeonsWidget({super.key});

@override State createState() => _MeetTheSurgeonsWidgetState(); }

class _MeetTheSurgeonsWidgetState extends State { late MeetTheSurgeonsModel _model;

final scaffoldKey = GlobalKey();

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

WidgetsBinding.instance.addPostFrameCallback((_) => setState(() {}));

}

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

super.dispose();

}

@override Widget build(BuildContext context) { return GestureDetector( onTap: () => _model.unfocusNode.canRequestFocus ? FocusScope.of(context).requestFocus(_model.unfocusNode) : FocusScope.of(context).unfocus(), child: Scaffold( key: scaffoldKey, backgroundColor: FlutterFlowTheme.of(context).secondary, appBar: AppBar( backgroundColor: Color(0xFF003057), automaticallyImplyLeading: false, leading: FlutterFlowIconButton( borderColor: Colors.transparent, borderRadius: 30, borderWidth: 1, buttonSize: 60, icon: Icon( Icons.arrow_back_rounded, color: Colors.white, size: 30, ), onPressed: () async { context.pop(); }, ), title: Text( 'Meet Our Surgeons', style: FlutterFlowTheme.of(context).headlineMedium.override( fontFamily: 'Poppins', color: Colors.white, fontSize: 22, letterSpacing: 0, ), ), actions: [], centerTitle: true, elevation: 2, ), body: InkWell( splashColor: Colors.transparent, focusColor: Colors.transparent, hoverColor: Colors.transparent, highlightColor: Colors.transparent, onTap: () async { await _model.columnController?.animateTo( _model.columnController!.position.maxScrollExtent, duration: Duration(milliseconds: 1), curve: Curves.ease, ); }, child: SingleChildScrollView( controller: _model.columnController, child: Column( mainAxisSize: MainAxisSize.max, children: [ FutureBuilder( future: PhysiciansCall.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( FlutterFlowTheme.of(context).primary, ), ), ), ); } final listViewPhysiciansResponse = snapshot.data!; return Builder( builder: (context) { final varPhysicians = getJsonField( listViewPhysiciansResponse.jsonBody, r'''$''', ).toList(); return ListView.builder( padding: EdgeInsets.zero, shrinkWrap: true, scrollDirection: Axis.vertical, itemCount: varPhysicians.length, itemBuilder: (context, varPhysiciansIndex) { final varPhysiciansItem = varPhysicians[varPhysiciansIndex]; return Container( width: 100, height: 100, decoration: BoxDecoration( color: FlutterFlowTheme.of(context) .secondaryBackground, border: Border.all( color: FlutterFlowTheme.of(context) .primaryBtnText, ), ), child: Row( mainAxisSize: MainAxisSize.max, children: [ ClipRRect( borderRadius: BorderRadius.circular(8), child: Image.network( '', width: 100, height: 100, fit: BoxFit.scaleDown, ), ), InkWell( splashColor: Colors.transparent, focusColor: Colors.transparent, hoverColor: Colors.transparent, highlightColor: Colors.transparent, onTap: () async { await actions.launchApi( (getJsonField( varPhysiciansItem, r'''$.Link''', true, ) as List) .map((s) => s.toString()) .toList()!, ); }, child: Text( getJsonField( varPhysiciansItem, r'''$.ProviderName''', ).toString(), style: FlutterFlowTheme.of(context) .titleMedium .override( fontFamily: 'Poppins', color: FlutterFlowTheme.of(context) .secondary, letterSpacing: 0, ), ), ), ], ), ); }, controller: _model.listViewController, ); }, ); }, ), ], ), ), ), ), ); } } //Model:

import '/backend/api_requests/api_calls.dart'; import '/flutter_flow/flutter_flow_icon_button.dart'; import '/flutter_flow/flutter_flow_theme.dart'; import '/flutter_flow/flutter_flow_util.dart'; import '/flutter_flow/flutter_flow_widgets.dart'; import '/custom_code/actions/index.dart' as actions; import '/flutter_flow/custom_functions.dart' as functions; import 'meet_the_surgeons_widget.dart' show MeetTheSurgeonsWidget; import 'package:flutter/material.dart'; import 'package:google_fonts/google_fonts.dart'; import 'package:provider/provider.dart';

class MeetTheSurgeonsModel extends FlutterFlowModel { /// State fields for stateful widgets in this page.

final unfocusNode = FocusNode(); // State field(s) for Column widget. ScrollController? columnController; // State field(s) for ListView widget. ScrollController? listViewController;

@override void initState(BuildContext context) { columnController = ScrollController(); listViewController = ScrollController(); }

@override void dispose() { unfocusNode.dispose(); columnController?.dispose(); listViewController?.dispose(); } } //Custom Imagebox: // Automatic FlutterFlow imports import '/backend/backend.dart'; import '/flutter_flow/flutter_flow_theme.dart'; import '/flutter_flow/flutter_flow_util.dart'; import '/custom_code/widgets/index.dart'; // Imports other custom widgets import '/custom_code/actions/index.dart'; // Imports custom actions import '/flutter_flow/custom_functions.dart'; // Imports custom functions import 'package:flutter/material.dart'; // Begin custom widget code // DO NOT REMOVE OR MODIFY THE CODE ABOVE!

class Base64Imagebox extends StatefulWidget { const Base64Imagebox({ super.key, this.width, this.height, required this.image, });

final double? width; final double? height; final String image;

@override State createState() => _Base64ImageboxState(); }

class _Base64ImageboxState extends State { @override Widget build(BuildContext context) { return Container(); } } //custom action to launch url api because built in action was not working: // Automatic FlutterFlow imports import '/backend/backend.dart'; import '/flutter_flow/flutter_flow_theme.dart'; import '/flutter_flow/flutter_flow_util.dart'; import '/custom_code/actions/index.dart'; // Imports other custom actions import '/flutter_flow/custom_functions.dart'; // Imports custom functions import 'package:flutter/material.dart'; // Begin custom action code // DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'package:url_launcher/url_launcher.dart';

Future launchApi(List links) async { // item is clicked then it will launch the url of the string for (String link in links) { if (await canLaunch(link)) { await launch(link); } else { throw 'Could not launch $link'; } } } //custom function to decode base64 string and convert to image path: import 'dart:convert'; import 'dart:math' as math;

import 'package:flutter/material.dart'; import 'package:google_fonts/google_fonts.dart'; import 'package:intl/intl.dart'; import 'package:timeago/timeago.dart' as timeago; import '/flutter_flow/lat_lng.dart'; import '/flutter_flow/place.dart'; import '/flutter_flow/uploaded_file.dart'; import '/flutter_flow/custom_functions.dart'; import '/backend/backend.dart'; import 'package:cloud_firestore/cloud_firestore.dart'; import '/auth/firebase_auth/auth_util.dart';

List decodeImage(List physicainsPhoto) { /// MODIFY CODE ONLY BELOW THIS LINE

// must use files instead of uint8list use final final decodedImages = []; for (final photo in physicainsPhoto) { final decodedImage = base64.decode(photo); decodedImages.add(utf8.decode(decodedImage)); } return decodedImages;

/// MODIFY CODE ONLY ABOVE THIS LINE } `

Environment

- FlutterFlow version: 4.1.60
- Platform:Web Desktop
- Browser name and version: web Chrome
- Operating system and version affected: Windows

Additional Information

I am behind on my set deadline.

[hughCar389]

I allowed access of my code as well here is all of the bug report links as well. Custom actions:

Widgets not working: ITFfkM/l7ZBgoctH176JKcJVvDgWH18cTIAFkuwacy8YGIytBqQIefSkTExVXcjhaVNcI1H8rH0FwfD6uN/PUccBHwuZbNQ+zLlQEjrke2iuaKa0PpCgOGtfEeFTfRG80Z+02h5AC/poLE4D7XGDeu+uRT7DFOu/Zwh9f6PHaOI=

[ignalauret]

Hey @hughCar389 thanks for your report. I just checked your project and I can see that you only have the name on the list item. I think you are missing the image. Could you please check and send me a new report code with the Bug being shown? Thanks for the help, have a great day!

[coolGui389]

I have connected the $.Pic to the custom image box but when I try to use my customer function called "decodeImage" to convert the list of strings into image Paths it fails. Bug report code: ITFfkM/l7ZBgoctH176JKcJVvDgWH18cTIAFkuwacy8YGIytBqQIefSkTExVXcjhaVNcO07+sE8H/snIiofPVO06ZQSuc7ZO+s9xFwv0e2i7R8WaCs+sYUEnL5tUCkyu55jQuhF4C7ZhLlYA20yyIPORSgnDFOu/Zwh9f6PHaOI=

[coolGui389]

@ignalauret

[hughCar389]

I think the custom code is the issue. When texting the custom code I get a (Invalid utf-8 byte at offset 0) Any advise or possible code editing? @ignalauret

[github-actions[bot]]

This issue is stale because it has been open for 7 days with no activity. If there are no further updates, a team member will close the issue.