آموزش کار با ویجت Text تکست در فلاتر

برای اینکه در فلاتر بخواهیم متنی را نمایش دهیم از ویجت Text استفاده میکنیم. اگر فقط متن ساده باشد،داخل کوتیشن” ” متن رو می نویسیم ولی اگر بخواهیم متغیری رو نمایش بدهیم برای استفاده از آن در ویجت تکست باید از علامت دلار $ استفاده کنیم.

ویجت Text در فلاتر پراپرتی های پر کاربردی دارد تا به دلخواه خود متن رو نمایش دهید.

• overflow : پراپرتی اورفلو وقتی استفاده می شود که متن ما طولانی استو در صفحه گوشی جا نمیشه و ما میخواهیم تا جایی که فضا هست متن رو نشان بده! و در آخر آن با چند حالت مختلف نشان بدیم که متن ادامه دارد.
• softWrap : اگر بخواهیم متن از صفحه گوشی خارج شود و محدودیتی برای آن قائل نشویم از این پراپرتی استفاده میکنیم که مقدار آن true یا false می باشد.
• textDirection : جهت متن رو تعیین میکند که چپ چین باشه یا راست چین.
• style : اگر بخواهیم به متن استایل بدهیم. نظیر رنگ و سایز و ضخامت و فونت و… از این پراپرتی استفاده میکنیم.
• Text.rich : یک نیمد کانستراکتور است که وقتی بخواهیم در یک متن روی کلماتی دلخواه استایل جداگانه ست کنیم. که با TextSpan متن ها را از هم جدا میکنیم.

نمونه کد استفاده از ویجت تکست Text متن

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: LTextWidget(),
    );
  }
}
//SourceCodeFlutter.com

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

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            
            // Simple Text Widget
            const Text('متن ساده',),

            //Simple Text Widget with custom styles

            const Text(
              'Over flow Text will skipped automatically. So lets have some Long text to get skipped',
              overflow: TextOverflow.ellipsis,
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 24),
            ),

            // Shadow Text
            const Text(
              'متنی که روی آن سایه اعمال شده',
              style: TextStyle(
                  color: Colors.green,
                  fontSize: 24,
                  shadows: <Shadow>[
                    Shadow(color: Colors.amber, offset: Offset(2, 4))
                  ]),
            ),
            // Text.rich- Text widget can display a paragraph with differently styled TextSpans
            //  Its similar to RichText

            const Text.rich(
              TextSpan(
                text: 'Hi, I am ',
                //default text style
                children: <TextSpan>[
                  TextSpan(
                      text: ' Italic, ',
                      style: TextStyle(fontStyle: FontStyle.italic)),
                  TextSpan(
                      text: 'Bold,',
                      style: TextStyle(fontWeight: FontWeight.bold)),
                  TextSpan(
                      text: 'Normal',
                      style: TextStyle(fontWeight: FontWeight.normal)),
                ],
              ),
            ),

            // RichText, which gives you more control over the text styles.

            RichText(
              softWrap: true,
              text: TextSpan(
                text: 'I am ',
                style: DefaultTextStyle.of(context).style,
                children: const <TextSpan>[
                  TextSpan(
                      text: 'RichText ',
                      style: TextStyle(color: Colors.green, fontSize: 24)),
                  TextSpan(
                      text: 'similar to ',
                      style: TextStyle(fontStyle: FontStyle.italic)),
                  TextSpan(
                      text: 'Text.rich',
                      style: TextStyle(fontWeight: FontWeight.bold)),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

خروجی کد بالا

این مطلب رو هم به شما پیشنهاد میکنم: معرفی ویجت Icon آیکون