Thiết kế website giá rẻ

Question

The below code creates the first screenshot. The problem is that the yellow card is being squashed – the string “Long text” should stay on one line and the user should be able to scroll right to see all 14 columns. Please could you tell me how to fix that while not causing the blue cards to be any wider? (the user should be able to see all of each of the blue cards without having to scroll) – like in the 2nd picture.

Thank you for any help 🙂

N

class ItemDetails extends StatelessWidget {  
            return Scaffold(

                appBar: AppBar(
                  title: Text("Test Page"),
                ),

                body: SingleChildScrollView(
                    child: Container(
                        margin: const EdgeInsets.all(10.0),

                        child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Card(
                                  color: Colors.yellow.shade200,
                                  elevation: 4.0,
                                  child: Column(
                                    children: [
                                      ListTile(
                                        title: Text("Card 1",
                                     style: TextStyle(color: Colors.black, decoration: TextDecoration.underline, fontWeight: FontWeight.w700),
                                        ),
                                        trailing: IconButton(
                                            onPressed: () async {
                                              await  goToWebPage("https://www.google.com");
                                            },
                                            icon: Icon(Icons.edit)
                                        ),
                                      ),
                                      Container(
                                        padding: EdgeInsets.all(0.0),
                                        alignment: Alignment.centerLeft,
                                        child:
                                        Table(
                                            columnWidths: const <int, TableColumnWidth>{
                                              0: FlexColumnWidth(),
                                              1: IntrinsicColumnWidth(),
                                            },
                                            children: [

                                            ]
                                        ),
                                      ),
                                      /// Detailed payscale table
                                      Container(

                                        alignment: Alignment.centerLeft,
                                        decoration: BoxDecoration(
                                            border: Border.all(color: Colors.blueAccent)
                                        ),
                                        padding: EdgeInsets.all(0.0),

                                        child:
                                        Table(
                                            columnWidths: const <int, TableColumnWidth>{
                                              0: IntrinsicColumnWidth(),
                                              1: IntrinsicColumnWidth(),
                                              2: IntrinsicColumnWidth(),
                                              3: IntrinsicColumnWidth(),
                                              4: IntrinsicColumnWidth(),
                                              5: IntrinsicColumnWidth(),
                                              6: IntrinsicColumnWidth(),
                                              7: IntrinsicColumnWidth(),
                                              8: IntrinsicColumnWidth(),
                                              9: IntrinsicColumnWidth(),
                                              10: IntrinsicColumnWidth(),
                                              11: IntrinsicColumnWidth(),
                                              12: IntrinsicColumnWidth(),
                                              13: IntrinsicColumnWidth(),
                                              14: IntrinsicColumnWidth(),
                                              15: IntrinsicColumnWidth(),
                                              16: IntrinsicColumnWidth()
                                            },
                                            children: [
                                              TableRow(
                                                  children: [
                                                    TableCell(
                                                      child: Text("Column",
                                                          style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
                                                      ),
                                                    ),
                                                    TableCell(
                                                        child: SizedBox(
                                                          width: 10.0,
                                                          height: 1.0,
                                                        )
                                                    ),
                                                    TableCell(
                                                      child: Text("1",
                                                          style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
                                                      ),
                                                    ),
                                                    TableCell(
                                                        child: SizedBox(
                                                          width: 10.0,
                                                          height: 1.0,
                                                        )
                                                    ),
                                                    TableCell(
                                                      child: Text("2",
                                                          style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
                                                      ),
                                                    ),
                                                    TableCell(
                                                        child: SizedBox(
                                                          width: 10.0,
                                                          height: 1.0,
                                                        )
                                                    ),
                                                    TableCell(
                                                      child: Text("3",
                                                          style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
                                                      ),
                                                    ),
                                                    TableCell(
                                                        child: SizedBox(
                                                          width: 10.0,
                                                          height: 1.0,
                                                        )
                                                    ),
                                                    TableCell(
                                                      child: Text("4",
                                                          style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
                                                      ),
                                                    ),
                                                    TableCell(
                                                        child: SizedBox(
                                                          width: 10.0,
                                                          height: 1.0,
                                                        )
                                                    ),
                                                    TableCell(
                                                      child: Text("5",
                                                          style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
                                                      ),
                                                    ),
                                                    TableCell(
                                                        child: SizedBox(
                                                          width: 10.0,
                                                          height: 1.0,
                                                        )
                                                    ),
                                                    TableCell(
                                                      child: Text("6",
                                                          style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
                                                      ),
                                                    ),
                                                    TableCell(
                                                        child: SizedBox(
                                                          width: 10.0,
                                                          height: 1.0,
                                                        )
                                                    ),
                                                    TableCell(
                                                      child: Text("7",
                                                          style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
                                                      ),
                                                    ),
                                                    TableCell(
                                                        child: SizedBox(
                                                          width: 10.0,
                                                          height: 1.0,
                                                        )
                                                    ),
                                                    TableCell(
                                                      child: Text("8",
                                                          style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
                                                      ),
                                                    )
                                                  ]
                                              ),
                                              TableRow(
                                                  children: [
                                                    TableCell(
                                                      child: Text("Row",
                                                          style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
                                                      ),
                                                    ),
                                                    TableCell(
                                                      child: Text(""),
                                                    ),
                                                    TableCell(
                                                      child: Text(""),
                                                    ),
                                                    TableCell(
                                                      child: Text(""),
                                                    ),
                                                    TableCell(
                                                      child: Text(""),
                                                    ),
                                                    TableCell(
                                                      child: Text(""),
                                                    ),
                                                    TableCell(
                                                      child: Text(""),
                                                    ),
                                                    TableCell(
                                                      child: Text(""),
                                                    ),
                                                    TableCell(
                                                      child: Text(""),
                                                    ),
                                                    TableCell(
                                                      child: Text(""),
                                                    ),
                                                    TableCell(
                                                      child: Text(""),
                                                    ),
                                                    TableCell(
                                                      child: Text(""),
                                                    ),
                                                    TableCell(
                                                      child: Text(""),
                                                    ),
                                                    TableCell(
                                                      child: Text(""),
                                                    ),
                                                    TableCell(
                                                      child: Text(""),
                                                    ),
                                                    TableCell(
                                                      child: Text(""),
                                                    ),
                                                    TableCell(
                                                      child: Text(""),
                                                    )
                                                  ]
                                              ),

                                              TableRow(
                                                  children: [
                                                    TableCell(
                                                      child: Text("1",
                                                          style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
                                                      ),
                                                    ),
                                                    TableCell(
                                                      child: Text(""),
                                                    ),
                                                    TableCell(
                                                        child: Text("Long text",
                                                            style: data?['ddet'] == data?['dlastupd'] ? TextStyle(color: Colors.red, fontWeight: FontWeight.w700): TextStyle(color:Colors.black)
                                                        )
                                                    ),
                                                    TableCell(
                                                      child: Text(""),
                                                    ),
                                                    TableCell(
                                                      child: Text("Long text",
                                                          style: data?['ddet'] == data?['dlastupd'] ? TextStyle(color: Colors.red, fontWeight: FontWeight.w700): TextStyle(color:Colors.black)
                                                      )
                                                    ),
                                                    TableCell(
                                                      child: Text(""),
                                                    ),
                                                    TableCell(
                                                      child: Text("Long text",
                                                          style: data?['ddet'] == data?['dlastupd'] ? TextStyle(color: Colors.red, fontWeight: FontWeight.w700): TextStyle(color:Colors.black)
                                                      )
                                                    ),
                                                    TableCell(
                                                      child: Text(""),
                                                    ),
                                                    TableCell(
                                                      child: Text("Long text",
                                                          style: data?['ddet'] == data?['dlastupd'] ? TextStyle(color: Colors.red, fontWeight: FontWeight.w700): TextStyle(color:Colors.black)
                                                      )
                                                    ),
                                                    TableCell(
                                                      child: Text(""),
                                                    ),
                                                    TableCell(
                                                      child: Text("Long text",
                                                          style: data?['ddet'] == data?['dlastupd'] ? TextStyle(color: Colors.red, fontWeight: FontWeight.w700): TextStyle(color:Colors.black)
                                                      )
                                                    ),
                                                    TableCell(
                                                      child: Text(""),
                                                    ),
                                                    TableCell(
                                                      child: Text("Long text",
                                                          style: data?['ddet'] == data?['dlastupd'] ? TextStyle(color: Colors.red, fontWeight: FontWeight.w700): TextStyle(color:Colors.black)
                                                      )
                                                    ),
                                                    TableCell(
                                                      child: Text(""),
                                                    ),
                                                    TableCell(
                                                      child: Text("Long text",
                                                          style: data?['ddet'] == data?['dlastupd'] ? TextStyle(color: Colors.red, fontWeight: FontWeight.w700): TextStyle(color:Colors.black)
                                                      )
                                                    ),
                                                    TableCell(
                                                      child: Text(""),
                                                    ),
                                                    TableCell(
                                                      child: Text("Long text",
                                                          style: data?['ddet'] == data?['dlastupd'] ? TextStyle(color: Colors.red, fontWeight: FontWeight.w700): TextStyle(color:Colors.black)
                                                      )
                                                    )
                                                  ]
                                              ),
                                            ]
                                        ),
                                      ),
                                    ],
                                  )),

                              Card(
                                  color: Colors.blue.shade200,
                                  elevation: 4.0,
                                  child: Column(
                                    children: [
                                      ListTile(
                                        title: Text("Card 2",
                                          style: TextStyle(color: Colors.black, decoration: TextDecoration.underline, fontWeight: FontWeight.w700),
                                        ),
                                        trailing: IconButton(
                                            onPressed: () async {
                                              await  goToWebPage("https://www.google.com");
                                            },
                                            icon: Icon(Icons.edit)
                                        ),
                                      ),

                                      Container(
                                        padding: EdgeInsets.all(0.0),
                                        alignment: Alignment.centerLeft,
                                        child:
                                        Table(
                                            columnWidths: const <int, TableColumnWidth>{
                                              0: FlexColumnWidth(),
                                              1: IntrinsicColumnWidth(),
                                            },
                                            children: [

                                              TableRow(
                                                  children: [
                                                    TableCell(
                                                      child: Text("Sub Title",
                                                          style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
                                                      ),
                                                    ),
                                                    TableCell(
                                                      child: Text("")
                                                    )
                                                  ]
                                              ),
                                              TableRow(
                                                  children: [
                                                    TableCell(
                                                        child: Text("Short text",

                                                        )
                                                    ),
                                                    TableCell(
                                                        child: Text("")
                                                    )
                                                  ]
                                              )
                                            ]
                                        ),
                                      ),
                                    ],
                                  )
                              ),
                              Card(
                                  color: Colors.blue.shade200,
                                  elevation: 4.0,
                                  child: Column(
                                    children: [
                                      ListTile(
                                        title: Text("Card 3",
                                          style: TextStyle(color: Colors.black, decoration: TextDecoration.underline, fontWeight: FontWeight.w700),
                                        ),
                                        trailing: IconButton(
                                            onPressed: () async {
                                              await  goToWebPage("https://www.google.com");
                                            },
                                            icon: Icon(Icons.edit)
                                        ),
                                      ),

                                      Container(
                                        padding: EdgeInsets.all(0.0),
                                        alignment: Alignment.centerLeft,
                                        child:
                                        Table(
                                            columnWidths: const <int, TableColumnWidth>{
                                              0: FlexColumnWidth(),
                                              1: IntrinsicColumnWidth(),
                                            },
                                            children: [

                                              TableRow(
                                                  children: [
                                                    TableCell(
                                                      child: Text("Sub Title",
                                                          style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
                                                      ),
                                                    ),
                                                    TableCell(
                                                        child: Text("")
                                                    )
                                                  ]
                                              ),
                                              TableRow(
                                                  children: [
                                                    TableCell(
                                                        child: Text("Short text",

                                                        )
                                                    ),
                                                    TableCell(
                                                        child: Text("")
                                                    )
                                                  ]
                                              )
                                            ]
                                        ),
                                      ),
                                    ],
                                  )
                              ),
                              
                              // text
                            ]
                        )
                    )
                )
            );
          }
          },
    );
  }
}

Thiết kế website giá rẻ

Danh mục

How to let one card extend beyond the screen for scrolling but keep another two cards within screen boundaries?