Текстовый виджет со встроенными кнопками

Question

Я делаю экран входа. Я хочу получить текст: «Продолжая, вы соглашаетесь с Условиями и положениями xxx и Политикой конфиденциальности», где «термины и условия» и «Политика конфиденциальности» - это кнопки, которые при нажатии переходят на два отдельных экрана.

Возможно ли это во Флаттере. Обратите внимание, что из-за длины конечной текстовой строки она может переноситься более чем на одну строку в зависимости от размера экрана.

Очень ценю любую помощь с этим.

Carson

Answer 1

вы можете сделать это с RichText

Как это

class DoItWithRichText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: RichText(
            text: TextSpan(
              text: "By continuing you agree the",
              children:[
                TextSpan(
                  text: " Terms and Conditions",
                  style: TextStyle(
                    color: Colors.blue
                  ),
                  recognizer: TapGestureRecognizer()..onTap = () => Navigator.of(context).push(MaterialPageRoute(builder: (context) => TermsAndConditions()))
                ),
                TextSpan(
                  text: " and "
                ),
                TextSpan(
                  text: "Privacy Policy",
                  style: TextStyle(
                    color: Colors.blue
                  ),
                    recognizer: TapGestureRecognizer()..onTap = () => Navigator.of(context).push(MaterialPageRoute(builder: (context) => PrivacyAndPolicy()))
                )
              ],
              style: TextStyle(
                color: Colors.black,
                fontSize: 13
              )
            ),

          ),
        ),
      ),
    );
  }
}

Answer 2

Вы можете использовать RawMaterialButton, чтобы сделать это:

    class LongTextRowWidget extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('By continuing you agree to the xxx '),
            InlineTextButton(text: 'Terms and Conditions', function: _jumpToTermsAndConditions),
            const Text(' and '),
            InlineTextButton(text: 'Privacy Policy', function: _jumpToPrivacyPolicy),
          ],
        );
      }
    }

    class InlineTextButton extends StatelessWidget {
      final String text;
      final Function function;
      InlineTextButton({this.text, this.function});
      @override
      Widget build(BuildContext context) {
        return RawMaterialButton(
          constraints: BoxConstraints(),
          onPressed: function,
          child: Text(
            text,
            style: TextStyle(
              fontWeight: FontWeight.bold,
              color: Theme.of(context).primaryColor,
            ),
          ),
        );
      }
    }