[flutter]title 이 null 이면 Text 위젯이 비활성화 되고 null 이 아니면 활성화 되게 해줘

혁진·2023년 8월 24일
0
import 'package:flutter/material.dart';
///command 정보를 표현하는 block 입니다.
///title(String) : 큰 제목 , tileItmeList(Widget<List>) : tileItemWidget(String imagePath, String title, String subText) 을 이용하여 columnList 형식으로 나열
class RectangleTitleColumnList extends StatelessWidget {
  const RectangleTitleColumnList(
      {Key? key,
      this.title,
      this.tileItmeList,
      required this.arrowButton})
      : super(key: key);
  final String? title;
  final List<Widget>? tileItmeList;
  final bool arrowButton;
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 10, left: 30, right: 30),
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(30), // 각 모서리를 10의 반지름으로 만듭니다.
          color: Theme.of(context).colorScheme.surface,
        ),
        child: Padding(
          padding:
              const EdgeInsets.only(left: 30, right: 30, top: 20, bottom: 20),
          child: Column(
            children: [
              // 패딩 값을 10으로 설정합니다.
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                 
                  Text(
                    title,
                    style: const TextStyle(
                        fontSize: 24, fontWeight: FontWeight.bold),
                  ),
                  arrowButton
                      ? IconButton(
                          onPressed: () {},
                          icon: const Icon(Icons.arrow_forward_ios_rounded))
                      : const SizedBox()
                ],
              ), // 제목
              const SizedBox(
                height: 6,
              ),
              Column(
                children: tileItmeList ?? [],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

이 함수에서 나는 title 이 null 이면 비활성화되게 하고 싶었다.
그래서 null 에 관련된 ?? 연산자나 ? : 연산자로 처리하려 했지만 아무것도 없는 위젯? 을 구현하는게 생각이 나지 않았다.

그래서 검색해보았다.

import 'package:flutter/material.dart';

class RectangleTitleColumnList extends StatelessWidget {
  const RectangleTitleColumnList(
      {Key? key,
      this.title,
      this.tileItmeList,
      required this.arrowButton})
      : super(key: key);
  final String? title;
  final List<Widget>? tileItmeList;
  final bool arrowButton;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 10, left: 30, right: 30),
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(30),
          color: Theme.of(context).colorScheme.surface,
        ),
        child: Padding(
          padding:
              const EdgeInsets.only(left: 30, right: 30, top: 20, bottom: 20),
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  if (title != null)
                    Text(
                      title!,
                      style: const TextStyle(
                          fontSize: 24, fontWeight: FontWeight.bold),
                    ),
                  
                  if(arrowButton == true)
                      IconButton(
                          onPressed: () {},
                          icon: const Icon(Icons.arrow_forward_ios_rounded))
                      
                ],
              ),
              const SizedBox(
                height: 6,
              ),
              Column(
                children: tileItmeList ?? [],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

이러한 형식으로 위젯 위에 if() 문을 작성하여 if 문을 만족하면 위젯이 나타나게 설정할 수 있다.

profile
긍정적으로 살래요

0개의 댓글