flutter appbar 플러터 앱바 너비 높이 글자 스타일 조정 leading text

1. 길이 조정

leadingWidth 를 통해 글자에 할애할 칸이 어느정도인지 조정할 수 있다.

전

return Scaffold(
  appBar: AppBar(
      leading: const Text("Instagram", style : TextStyle(fontSize : 18, fontWeight: FontWeight.normal, color: Colors.black87)),
      actions: const[Icon(Icons.add_box_outlined)]),
  body: const Text('hi'),
);

후

return Scaffold(
  appBar: AppBar(
    leadingWidth: 30,
      leading: const Text("Instagram", style : TextStyle(fontSize : 18, fontWeight: FontWeight.normal, color: Colors.black87)),
      actions: const[Icon(Icons.add_box_outlined)]),
  body: const Text('hi'),
);

 

2. 스타일 조정

글자위젯 안에 style을 정해주면 된다.

leading: const Text("Instagram", 
 style : TextStyle(
  fontSize : 18, 
  fontWeight: FontWeight.normal, 
  color: Colors.black87)
  ),
 ),

 

3. 높이 조정

toolbarHeight: 45,

 

4. 글자 패딩

        leading: const Padding()

 

 

>> 코드

import 'package:flutter/material.dart';

void main() {
  //stl 상위로 material 있어야 좋음
  runApp( MaterialApp(
    //css 모아놓기
      theme: ThemeData(
       // iconTheme: const IconThemeData(color:Colors.black87),
        appBarTheme: const AppBarTheme(
            color:Colors.white,
            actionsIconTheme: IconThemeData(color : Colors.black87)),
        // textTheme: const TextTheme(
        //   bodyText2: TextStyle(color : Colors.red)
        // ),
      ),

      home:const MyApp()));
}

// 위젯 담을 변수는 위젯 밖에

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 45,
          leadingWidth: 120,
          leading: const Padding(
            padding:  EdgeInsets.all(8.0),
            child: Text("Instagram", style : TextStyle(
                fontSize : 18, fontWeight: FontWeight.normal, color: Colors.black87)),
          ),
          actions: const[Icon(Icons.add_box_outlined)]),
      body: const Text('hi'),
    );
  }
}