如何在 flutter 中使显示响应

Question

i am beginner in flutter, i was creating a widget that represents schedules in a football league, but after i executed i found that my screen is not responsive and the display is not fine, a yellow zone appeared, and the display of the date and time is not always in the center, the widget became not ergonomic here an image after execution:

Here the code i have tried:

import 'package:flutter/material.dart';


class BroadcastSchedule extends StatelessWidget  {

  String home;
  String homeImage;
  String away;
  String awayImage;
  String time;
  String date;

  BroadcastSchedule(this.home,this.homeImage,this.away,this.awayImage,this.time,this.date);

  @override
  Widget build(BuildContext context) {
    return  Card(
      elevation: 4.0,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child:
        Row(
          children: <Widget>[
            CircleAvatar(
              backgroundImage: NetworkImage(this.homeImage),
            ),
            const SizedBox(width:10.0),
            Spacer(),
            Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: <Widget> [
                Text(this.home),
                const SizedBox(height: 5.0, ),
              ],
            ),
            Padding(
              padding: EdgeInsets.only(top:20.0, left: 20.0, right: 20.0),
             child: Container(
               padding: EdgeInsets.all(2.0),
               decoration: BoxDecoration(
                color: Colors.grey[700],
                 borderRadius: BorderRadius.circular(11.0),
               ),
               child: Column(

                 children: [
                   Text(this.time,style: TextStyle(
                       fontWeight: FontWeight.bold,
                       fontSize: 18.0,
                       color: Colors.white,
                   ),),
                   const SizedBox(height: 5.0, ),
                   Text(this.date,style: TextStyle(
                       fontWeight: FontWeight.bold,
                       fontSize: 16.0,
                       color: Colors.white
                   ),),
                 ],
               ),
             ),
           ),
           
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget> [
                Text(this.away),
                const SizedBox(height: 5.0, ),
              ],
            ),
            Spacer(),
            CircleAvatar(
              backgroundImage: NetworkImage(this.awayImage),
            ),
          ],
        ),
      ),
    );
  }
}

My girl is to learn how to make my code responsive and that will not at any case have an error in display like this

after adding Expanded above column, the grey Box is still misplaced and there is a problem with the long Text

Answer 1

Seems like your text is overflowing.

Added Expanded above Column widget. Expanded:A widget that expands a child of a [Row], [Column], or [Flex] so that the child fills the available space.

But now we have to Fix Long text.

Expanded(child:  Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget> [
                Text(this.away),
                const SizedBox(height: 5.0, ),
              ],
            ),
            Spacer(),
            CircleAvatar(
              backgroundImage: NetworkImage(this.awayImage),
            ),)