Flutter仅展示无图片用户文本时触发断言错误的技术问询

Hey there! Let's get this sorted out. The error you're seeing ('imageUrl != null': is not true) happens because when a user uploads only text, your mediaUrl variable is null—but your cachedNetworkImage method expects a non-null string for imageUrl. Here's how to fix it so you can display text-only posts properly:

Step 1: Update the buildPostImage Method #

We need to add a check for mediaUrl before trying to render the image. If there's no image URL, we'll skip rendering the image component entirely:

Widget? buildPostImage() { 
  // Don't render the image section if mediaUrl is null/empty
  if (mediaUrl == null || mediaUrl.isEmpty) {
    return null; // Alternatively, return SizedBox.shrink() if you prefer a 0-space widget
  }

  return Padding( 
    padding: const EdgeInsets.all(8.0), 
    child: GestureDetector( 
      onDoubleTap: handleLikePost, 
      child: Stack( 
        alignment: Alignment.center, 
        children: <Widget>[ 
          cachedNetworkImage(mediaUrl!), 
          showHeart 
              ? const Icon(Icons.favorite, size: 100.0, color: Colors.grey[400]) 
              : const SizedBox.shrink(), // Replace empty Text with a shrinkable box for cleaner layout
        ], 
      ), 
    ), 
  ); 
}

Step 2: Conditionally Render the Image in Your Post Layout #

When building the full post, only include the image component if buildPostImage() returns a non-null value. This ensures text-only posts don't try to load an image:

Widget buildPost() {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      // Only add the image if it exists
      if (buildPostImage() != null) buildPostImage()!,
      // Your existing text description section
      Row( 
        crossAxisAlignment: CrossAxisAlignment.start, 
        children: <Widget>[ 
          Expanded( 
            child: Padding( 
              padding: const EdgeInsets.only(), 
              child: Container( 
                decoration: BoxDecoration( 
                  borderRadius: BorderRadius.circular(0.0) 
                ), 
                child: Padding( 
                  padding: const EdgeInsets.all(10.0), 
                  child: Text( 
                    description ?? '', // Add a fallback for null descriptions
                    style: const TextStyle( 
                      fontSize: 17.0, 
                    ), 
                  ), 
                ), 
              ), 
            ), 
          ), 
        ], 
      ),
    ],
  );
}

Optional: Make cachedNetworkImage Null-Safe #

To add an extra layer of protection, update your cachedNetworkImage method to handle null URLs gracefully:

Widget? cachedNetworkImage(String? mediaUrl) { 
  if (mediaUrl == null || mediaUrl.isEmpty) {
    return null;
  }

  return CachedNetworkImage( 
    imageUrl: mediaUrl, 
    fit: BoxFit.cover, 
    placeholder: (context, url) => const Padding( 
      padding: EdgeInsets.all(20.0), 
      child: CircularProgressIndicator(), 
    ), 
    errorWidget: (context, url, error) => const Icon(Icons.error), 
  ); 
}

With these changes, when a user uploads only text, the image section won't render at all, and your text description will display as expected without triggering the assertion error.

内容的提问来源于stack exchange，提问作者user13136805