Home > Enterprise >  A page I made was fine last night but now only shows me black and red
A page I made was fine last night but now only shows me black and red

Time:01-06

It was something like this. Now it looks like this.

I don't know what I did wrong.

import 'package:flutter/material.dart';
import 'package:nle_app/models/stall.dart';
import 'package:nle_app/constants/colors.dart';

class StallInfo extends StatelessWidget {
  final stall = Stall.generateRestaurant();
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(top: 40),
      padding: const EdgeInsets.symmetric(horizontal: 25),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    stall.name,
                    style: const TextStyle(
                      fontSize: 25,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 10),
                  Row(
                    children: [
                      Container(
                          padding: EdgeInsets.all(5),
                          decoration: BoxDecoration(
                            color: Colors.blueGrey.withOpacity(0.4),
                            borderRadius: BorderRadius.circular(5),
                          ),
                          child: Text(
                            stall.label,
                            style: const TextStyle(
                              color: Colors.white,
                            ),
                          )),
                      const SizedBox(
                        width: 10,
                      ),
                    ],
                  )
                ],
              ),
              ClipRRect(
                borderRadius: BorderRadius.circular(50),
                child: Image.asset(
                  stall.logoUrl,
                  width: 80,
                ),
              ),
            ],
          ),
          const SizedBox(
            height: 5,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                stall.desc,
                style: const TextStyle(fontSize: 16),
              ),
              Row(
                children: [
                  const Icon(
                    Icons.star_outline,
                    color: Colors.amber,
                  ),
                  Text(
                    '${stall.score}',
                    style: const TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(width: 15),
                ],
              )
            ],
          )
        ],
      ),
    );
  }
}

The image I uploaded shows what its suppossed to look like but in case you missed it, it's supposed to look like this.. I thought maybe the image overflowed to the right but even when I remove the image it's the same thing. I've tested it on different devices but it's all the same. It doesn't even throw an exception or anything. Does anyone know how to fix this.

CodePudding user response:

It is missing material, Check if the parent widget contains Scaffold. Also for this one , you can wrap with any material widget like Material, Card,Scaffold....

 Widget build(BuildContext context) {
    return Material(
       child: Container(
    
```
  • Related