I'm new to flutter and am trying to create a 2 pages (or routes) app. I have one basic page with some kind of a form, while the other has a GridView.

I'm using a MaterialApp as per in the demo app, and a theme. On the root page (the form), text color is as expected black. However, every tiles of my grid on the second page contain their own text, colored red and underlined yellow.

Could you give me a hint as to why ?

(Btw, I compute the ratio of my gridview's cells using the context dimensions. I am not satisfied with this solution since if I were to had padding to my Container, the grid would overflow in height. Is there a better way ? Consider this as a side quest-ion =))

Here is the portion of the code.

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => const MyHomePage(title: 'Create a game'),
        '/game': (context) => const Game(),
      },
    );
  }
}

And for the second page:

import 'package:flutter/material.dart';

class Game extends StatelessWidget {
  const Game({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return Grid();
  }
}

class Grid extends StatefulWidget {
  var tokens = List<int>.filled(9, 0);

  Grid({Key? key}) : super(key: key);

  @override
  _GridState createState() => _GridState();
}

class _GridState extends State<Grid> {
  final _gridViewCrossAxisCount = 3;

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Container(
        padding: EdgeInsets.zero,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            GridView.builder(
              shrinkWrap: true,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: _gridViewCrossAxisCount,
                childAspectRatio: MediaQuery.of(context).size.width / MediaQuery.of(context).size.height,
              ),
              itemCount: widget.tokens.length,
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  decoration: cellDecoration(index, _gridViewCrossAxisCount),
                  alignment: Alignment.center,
                  child: Text(widget.tokens[index].toString()),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

BoxDecoration cellDecoration(int index, int gridViewCrossAxisCount) {
  return BoxDecoration(
    color: Colors.white,
    
    border: Border.all(
      color: Colors.black12,
      width: 1.5,
    ),
  );
}

Thanks in advance.

CodePudding user response：

You are missing a scaffold in second screen. Wrap the expanded widget with a scaffold and the text will render as per the text theme mentioned in material app