Как написать текст по центре экрана?

Question

У меня есть такой код:

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: widget.backgroundColor,
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(child: Expanded(child: GestureDetector(onTap: changeColorOfBackground)
           ),
          ),
        );
      }
    }

Как мне добавить текст по центре экрана, чтобы при этом можно было нажимать по экрану везде и обрабатывать смену цвета. Просто если я размещу текст внутри child в объекте GestsureDetector, тогда можно будет только нажимать на текст и только тогда будет срабатывать событие.

Answer 1

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  Color color = Colors.red;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: color,
      appBar: AppBar(
        title: Text('title'),
      ),
      body: GestureDetector(
        behavior: HitTestBehavior.translucent,
        onTap: () {
          setState(() {
            if (color == Colors.red) {
              color = Colors.green;
            } else {
              color = Colors.red;
            }
          });
        },
        child: Center(
          child: Text('text'),
        ),
      ),
    );
  }
}

Если нужно прям в любом месте нажатия менять цвет, тогда так:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  Color color = Colors.red;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.translucent,
      onTap: () {
        setState(() {
          if (color == Colors.red) {
            color = Colors.green;
          } else {
            color = Colors.red;
          }
        });
      },
      child: Scaffold(
        backgroundColor: color,
        appBar: AppBar(
          title: Text('title'),
        ),
        body: Center(
          child: Text('text'),
        ),
      ),
    );
  }
}

БЛОГ НА HUSL

Как написать текст по центре экрана?

Ответы (1 шт):