Flutter: Where I can add Text() - flutter

Question

I want to tap on the screen, and change background color to random color. It works fine, but I want to add Text on the center of screen, help me please.
Maybe someone have ideas, Thank you!
I try to add multiple child to AnimatedContainer.
Tried to add text in GestureDetector, but it doesn't work correctly
TopScreen.dart
import 'package:flutter/material.dart';
class TopScreen extends StatefulWidget {
final Widget child; //child widget
TopScreen({this.child});
#override
State createState() => _TopScreenState();
static _TopScreenState of (BuildContext context) {
assert(context != null);
final _TopScreenState result = context.findAncestorStateOfType();
return result;
}
}
class _TopScreenState extends State<TopScreen> {
Color _color = Colors.white;
#override
Widget build(BuildContext context) {
return Scaffold(
body: AnimatedContainer(
child: widget.child,
color: _color,
duration: Duration(milliseconds: 500),
),
);
}
void setColor(Color color) {
this._color = color;
}
}
main.dart
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:solidsoftwaretest/TopScreen.dart';
void main() => runApp(MaterialApp(home: TopScreen(child: MainScreen())));
class MainScreen extends StatefulWidget {
#override
State createState() => _MainScreenState();
}
class _MainScreenState extends State<MainScreen> {
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
TopScreen.of(context).setColor(Colors.primaries[Random().nextInt(Colors.primaries.length)]);
TopScreen.of(context).setState(() {});
},
);
} //build
}
UPD: if I add Child (Text) to GestureDetector - gestureDetector works only on Text.
class _MainScreenState extends State<MainScreen> {
#override
Widget build(BuildContext context) {
return GestureDetector(
child: Center(
child: Text('Hey there!')
),
onTap: () {
TopScreen.of(context).setColor(Colors.primaries[Random().nextInt(Colors.primaries.length)]);
TopScreen.of(context).setState(() {});
}
);
} //build
}

Answer 1

You can add Text widget inside a Container & wrap it further in GestureDetector. In order to make GestureDetector work on the whole area, give the Container a transparent color as follows:
return GestureDetector(
onTap: () {
TopScreen.of(context).setColor(Colors.primaries[Random().nextInt(Colors.primaries.length)]);
TopScreen.of(context).setState(() {});
},
child: Container(
color: Colors.transparent,
alignment: Alignment.center,
child: Text('Hey there'),
),
);
Hope, it will help

Answer 2

You should be able to put a Column inside your AnimatedContainer. The Column will hold multiple Widgets.
I've updated the code to show the full example.
ScaffoldColorCenterText60597839(
child: Text('Bananas'),
)
class ScaffoldColorCenterText60597839 extends StatefulWidget {
final Widget child;
ScaffoldColorCenterText60597839({
this.child
});
#override
_ScaffoldColorCenterText60597839State createState() => _ScaffoldColorCenterText60597839State();
}
class _ScaffoldColorCenterText60597839State extends State<ScaffoldColorCenterText60597839> {
Color _color = Colors.white;
#override
Widget build(BuildContext context) {
return Scaffold(
body: AnimatedContainer(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
widget.child,
Text('A text widget')
],
)
),
color: _color,
duration: Duration(milliseconds: 500),
),
);
}
}