[Flutter] 4. 위젯 수정

2023.11.23 - [dev/flutter] - [Flutter] 3. 버튼 만들기

[Flutter] 3. 버튼 만들기

 

 

가이드 링크 : https://codelabs.developers.google.com/codelabs/flutter-codelab-first?hl=ko#4

 

위젯의 텍스트를 키우고, 위치를 조정할 것이다.

 

복잡성을 관리한다... 이미 충분히 한 파일 내에서 분리하는 모습이 매우 복잡해보이지만,... 

appState를 가져오는 것이 아닌 pair라는 변수로 관리

    var appState = context.watch<MyAppState>();
    var pair = appState.current;

    return Scaffold(
      body: Column(
        children: [
          Text('A random AWESOME idea:'),
          // Text(appState.current.asLowerCase),
          Text(pair.asLowerCase),

 

 

Refactor 메뉴를 불러온다?

: 뭔가 함수 불러오는 그런건가

1. Text함수를 리펙터링 하는데 '마우스 우클릭' 후 Refactor선택 (Ctrl + Shift + R)

2. Ctrl + . 

 

Extract Widget클릭

 

 

그리고 'BigCard'를 할당

          Text('A random AWESOME idea:'),
          // Text(appState.current.asLowerCase),
          BigCard(pair: pair),

 

그리고 스크롤 해보면 아래에 BigCard 위젯이 생성되어 있다.

class BigCard extends StatelessWidget {
  const BigCard({
    super.key,
    required this.pair,
  });

  final WordPair pair;

  @override
  Widget build(BuildContext context) {
    return Text(pair.asLowerCase);
  }
}

 

 

BigCard클래스에서 return의 Text에 Ctrl + . 하여 Refactor를 불러오고

' Wrap with Padding ' 을 클릭

 

 

그리고 다시 Padding을 'Wrap with Widget'으로 Refactor해주고,

'Card'로 이름을 변경하면 화면에 다음과 같이 변경된다. 설명도 복잡해지네..

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text(pair.asLowerCase),
      ),
    );
  }
}

 

 

전체적 분위기, 색상을 바꾸고 싶은 경우 Theme를 변경한다.

Card의 분위기를 바꿔보자..

: theme = Theme.of(context);  ... 현재 앱의 테마를 받아오고...

: color: theme.colorScheme.primary, .... primary색상을 넣는다..?

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);

    return Card(
      color: theme.colorScheme.primary,
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Text(pair.asLowerCase),
      ),
    );
  }

 

 

현재의 테마 색상은 MyApp클래스에 있다.

class MyApp extends StatelessWidget {
	Widget build(BuildContext context) {
        theme: ThemeData(
          useMaterial3: true,
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
        ),
	}
}

 

 

버튼의 텍스트 색상 바꾸기

: style을 만들어주는데 theme.colorScheme.onPrimary 로 설정해준다.

: theme.colorScheme에는 .secondary, .surface, .onPrimary가 있다

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final style = theme.textTheme.displayMedium!.copyWith(
      color: theme.colorScheme.onPrimary,
    );

    return Card(
      color: theme.colorScheme.primary,
      child: Padding(
        padding: const EdgeInsets.all(20),
        // child: Text(pair.asLowerCase),
        child: Text(pair.asLowerCase, style: style),
      ),
    );
  }

 

 

 

UI 중앙 배치

: Column내부에 'mainAxisAlignment'를 조정한다.

: mainAxisAlignment: MainAxisAlignment.center

: Columnd의 중앙 즉 Vertical_Center가 된다

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();
    var pair = appState.current;

    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,	// this add
        children: [
          Text('A random AWESOME idea:'),
          // Text(appState.current.asLowerCase),
          BigCard(pair: pair),

          // Add Button
          ElevatedButton(
            onPressed: () {
            print('##### button pressed');
            appState.getNext();
           }, 
           child: Text('Next'))
        ],
      ),
    );
  }
}

 

 

Scaffold는 중앙에 배치되어 있지 않다.

이제 수평을 중앙으로 맞추려면,

: Scaffold를 Wrap with Center로 설정한다

return Scaffold (
	body: Center(
    	child: Column(
        	mainAxisAlignment: MainAxisAlignment.center,
            ...
        )
    )
)