ویجت 9 (RichText در فلاتر)

خوب دوستان عزیز بریم سراغ یکی از ویجت های جذاااااب فلاتر یعنی RichText

در مواقعی نیاز هست که در نوشته بعضی کلمات استایل متفاوتی از بقیه داشته باشند مثلا Bold باشه یا به مانند لینک باشه و ...

به عکس زیر دقت کنید

برای حل این مشکل چه کنیم ؟

از اون جایی که مثل همیشه فلاتر برای هر مشکلی راه حل خودش را داره پس غصه ی چی را باید خورد

ویجت RichText راه حل این مشکل است به کد زیر و خروجی ان دقت کنید

child: Center(
  child: RichText(
    text: TextSpan(
      text: 'Don\'t have an account?', style: TextStyle(color: Colors.black, fontSize: 18),

children: <TextSpan>[
  TextSpan(text: ' Sign up', style: TextStyle(color: Colors.blueAccent, fontSize: 18)
      )
]

قسمت Signup استایلی متفاوت تر از بقیه نوشته ما دارد و این اتفاق با دادن این استایل

style: TextStyle(color: Colors.blueAccent, fontSize: 18)

اتفاق افتاده است اما حالا چطوری خاصیت کلیک تعریف کنم که فقط مختص SignUp باشه ؟

Container(
    padding: EdgeInsets.all(10),
    child: Center(
      child: RichText(
        text: TextSpan(
            text: 'Don\'t have an account?',
            style: TextStyle(
                color: Colors.black, fontSize: 18),
            children: <TextSpan>[
              TextSpan(text: ' Sign up',
                  style: TextStyle(
                      color: Colors.blueAccent, fontSize: 18),
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
 // navigate to desired screen
 }
              )
            ]
        ),
      ),
    )
)

اتفاقی که قراره در کلیک روی Signup بیفتد را در onTab تعریف میکنیم

بریم یک مثال دیگر بزنیم میخواهیم کد خروجی زیر را بزنیم

این کد استایل های متفاوت ماست

TextSpan(text: 'open source',
    style: TextStyle(
        color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold, decoration: TextDecoration.underline),
  recognizer: TapGestureRecognizer()
    ..onTap = () {
     // open desired screen
    }
),TextSpan(
  text: 'business,',
    style: TextStyle(
        color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold, decoration: TextDecoration.underline),
    recognizer: TapGestureRecognizer()
      ..onTap = () {
        // open desired screen
      }
),

و در نهایت کد کامل مورد نظر

Container(
    color: Colors.black,
    padding: EdgeInsets.all(10),
    child: Center(
        child: RichText(
          text: TextSpan(
              text: 'GitHub is a development platform inspired by the way you work. From ',
              style: TextStyle(
                  color: Colors.grey,
                  fontSize: 20,
                  fontWeight: FontWeight.bold),
              children: <TextSpan>[
                TextSpan(text: 'open source',
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 20,
                        fontWeight: FontWeight.bold,
                        decoration: TextDecoration.underline),
                    recognizer: TapGestureRecognizer()
                      ..onTap = () {
 // open desired screen
 }
                ),
                TextSpan(
                    text: ' to ',
                    style: TextStyle(color: Colors.grey,
                        fontSize: 20,
                        fontWeight: FontWeight.bold)
                ),
                TextSpan(
                    text: 'business,',
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 20,
                        fontWeight: FontWeight.bold,
                        decoration: TextDecoration.underline),
                    recognizer: TapGestureRecognizer()
                      ..onTap = () {
 // open desired screen
 }
                ),
                TextSpan(
                    text: ' you can host and review code, manage projects, and build software alongside 36 million developers.',
                    style: TextStyle(color: Colors.grey,
                        fontSize: 20,
                        fontWeight: FontWeight.bold)
                )
              ]
          ),
        )
    )
)

دیگر به راحتی در هر جایی از متن مورد نظر میتوانید استایل خودتان را بدهید

به همین سادگی به همین خوشمزگی.

اگر مطلب براتون مفید بوده لینک ان را برای دوستانتان در شبکه های اجتماعی بفرستید تا ان ها هم بتوانند استفاده کنند و به دوستداران فلاتر روز به روز افزوده شود?

روز های زیبا و جذاااااااااااااااااابی داشته باشید قلب یادتون نره :)