str_replace(",", "", $text) 는 쉼표 ,를 빈 문자열 ""로 바꿉니다.

결과적으로 모든 쉼표가 제거됩니다.

다이얼로그를 버튼 클릭 시 띄우려면 FloatingActionButton의 onPressed 속성에 showDialog를 추가합니다.

2. 코드 예제

showDialog 필수 파라미터는 context: 현재 화면의 빌드 컨텍스트, builder: 다이얼로그의 UI를 반환하는 함수 입니다

3. 내용 정리

showDialog 사용 시 context와 builder가 필요하며, 다이얼로그 안에 Dialog 위젯을 사용하여 원하는 UI 구성 가능이 있으며, FloatingActionButton을 클릭하면 다이얼로그가 나타납니다

class Suse_App extends StatelessWidget {

  var susu = 1;

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        floatingActionButton: FloatingActionButton(

          child: Text(susu.toString()), // 버튼에 숫자 표시

          onPressed: () {

            susu++; // 클릭 시 숫자 증가

          },

        ),

      ),

    );

  }

}

위 코드는 StatelessWidget 를 사용하여 버튼 클릭시 숫자를 증가시키는 기능을 구현 부분이며 버튼을 클릭시 susu의 변수값이 증가하지만 화면에 변화가 발생하지 않습니다 그 이유는 StatelessWidget 이 재렌더링이 되지 않았기 때문입니다

class Suse_App extends StatefulWidget {

  @override

  State<Suse_App> createState() => _Suse_AppState();

}

class _Suse_AppState extends State<Suse_App> {

  // 상태 변수

  var susu = 1;

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        floatingActionButton: FloatingActionButton(

          child: Text(susu.toString()), // 현재 숫자를 표시

          onPressed: () {

            setState(() {

              susu++; // 상태 변경

            });

          },

        ),

      ),

    );

  }

}

이때 사용되는 내용이 StatefulWidget 위젯이며 사용하면 상태 변경에 따라 화면을 갱신할 수 있습니다 이때 2가지 주요 요소가 필요하며 위젯 클래스(StatefulWidget)를 전체 구조를 정의하고 상태 클래스(State)로 위젯의 상태와 이를 변경하는 로직을 포함해야됩니다

setState() 함수가 호출되면서 화면이 갱신되고 버튼에 표시된 susu 값이 증가하게 됩니다

주요 함수 요약

StatelessWidget

상태를 관리하지 않음. 화면 갱신이 필요 없는 경우 적합.

StatefulWidget

상태를 관리함. 화면 갱신이 필요한 경우 사용.

setState

상태를 변경하고 변경된 상태를 화면에 반영하기 위해 호출.

FloatingActionButton

onPressed 이벤트와 child 속성을 통해 버튼 동작과 UI를 정의.

void main() {

  runApp(const Suse_App());

}

class Suse_App extends StatelessWidget {

  const Suse_App({super.key});

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

        home: Scaffold(

          appBar: AppBar(),

          bottomNavigationBar: BottomAppBar(),

          body: ListView(

            children: [

              Text('매일같이 자신만의 속도로 세상을 살아갑니다.'),

      Text('매일같이 자신만의 속도로 세상을 살아갑니다.'),

      Text('매일같이 자신만의 속도로 세상을 살아갑니다.'),

            ],

          )

        )

    );

  }

}

목록의 개수가 3~4개로 정해져 있는경우 위 내용처럼 만들면 되지만 서버에서 데이터를 가져오거나 리스트 개수가 많은 경우 동적으로 생성해야 됩니다

//반복문일때

import 'package:flutter/material.dart';

void main() {

  runApp(const Suse_App());

}

class Suse_App extends StatelessWidget {

  const Suse_App({super.key});

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

        home: Scaffold(

          appBar: AppBar(),

          body: ListView.builder(

              itemCount: 3,

              itemBuilder: (c, i){

                return ListTile(

                  title: Text('매일같이 자신만의 속도로 세상을 살아갑니다.'),

                );

              },

            ),

          )

    );

  }

}

ListView.builder를 쓰시고 itemCount 에는 몇번 반복할지를 작성하고 itemBuilder 항목에는 함수를 입력해야되고 return 값을 입력되는 부분이 ListView.builder 안에서 반복 실행 됩니다

그리고 itemBuilder 에는 2개의 파라미터를 넣어야됩니다 첫번째 파라미터는 context 이고 두번째 파라미터는 위젯에서 반복생성될때마다 증가하는 정수값 입니다

그런데 위젯의 개수가 많다고해서 스크롤바가 자동으로 생기지 않습니다

스크롤바가 있는 긴 목록이 필요할 경우에는 ListView를 사용하게 되며, Column의 사용방법과 거의 동일합니다

ListView는 controller를 사용하여 스크롤 위치 감시도 가능합니다

그리고 가장 큰 장점은 메모리 절약 기능이 있습니다 예로 내용이 1 ~ 100까지 있는데 80번째의 내용을 보고 있다면 이미 스크롤해서 지나간 내용은 메모리에서 자동으로 삭제하여 성능 개선을 쉽게한다는 큰 장점이 있습니다

그래서 긴 목록을 사용할때는 ListView를 쓰시는것이 좋습니다

위젯 함수 작성법

class [함수명]extends StatelessWidget {

  const [함수명]({super.key});

  @override

  Widget build(BuildContext context) {

    return SizedBox(

      child: [출력할 위젯]('커스텀 위젯 입니다.'),

    );

  }

}

1. 함수명은 영문 대문자로 시작해야 됩니다

2. return 오른쪽에 출력할 위젯명 을 입력합니다

3. 함수 사용은 함수명을 입력하면 바로 사용가능합니다

class Suse_App extends StatelessWidget {

  const Suse_App({super.key});

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

        home: Scaffold(

          appBar: AppBar(),

          bottomNavigationBar: BottomAppBar(),

          body: [사용할 위젯명],

        )

    );

  }

}

원하는 위치에 작성한 위젯 함수명을 원하는 위치 입력하시면 됩니다.

ElevatedButton : 배경이 있는 입체적인 버튼으로, 기본적으로 음영이 있어 버튼이 위로 떠 있는 것처럼 보입니다.(사용자의 주목을 끌고 중요한 액션을 수행할 때 적합합니다.)

IconButton : 아이콘으로만 이루어진 버튼으로, 텍스트가 없이 아이콘만 표시됩니다. 주로 툴바나 앱바에서 사용됩니다. (특정 액션을 나타내는 아이콘을 클릭할 때 사용됩니다.)

backgroundColor: Colors.[배경색상]

fontSize :  [글자크기]

fontWeight: FontWeight.[글자두께],

fontFamily: '폰트명',

letterSpacing : [글자간격]

alignment: Alignment.topCenter : 중앙상단

alignment: Alignment.topRight : 우측상단

alignment: Alignment.centerLeft : 좌측중앙

alignment: Alignment.center : 정중앙

alignment: Alignment.centerRight : 우측중앙

alignment: Alignment.bottomLeft : 좌측하단

alignment: Alignment.bottomCenter : 중앙하단

alignment: Alignment.bottomRight : 우측하단

박스에 좌상단,좌하단,우상단,우하단 등 정렬하려면 Align() 안에 작성해야됩니다

padding: EdgeInsets.all(20),//전체 padding을 줄때

margin: EdgeInsets.fromLTRB(0, 30, 0, 0) //개별 margin 줄때

padding: EdgeInsets.fromLTRB(0, 30, 0, 0) //개별 padding을 줄때

개별 margin, padding 순서 위쪽 -> 오른쪽 -> 아래쪽 -> 왼쪽 순서

Column( children:[] ) 위젯을 가로배치할 경우