Flutter

SizedBox(height: MediaQuery.of(context).size.height * 0.2) 화면의 사이즈에 맞게 위 부분 높이를 구현할 수 있다. 위 코드는 총 높이의 0.2의 height를 가지는 SizeBox를 만들 수 있다.

Flex와 Expanded를 가지고 쉽게 화면을 분할하는 방법을 알아보자. 위 그림은 Column : ListView : Row가 수직의 넓이를 15 : 40 : 10 비율로 나눠진 그림이다. 만약 위 처럼 화면을 분할하고 싶다면 Flex( direction: Axis.vertical, children: [ Expanded( flex: 15, child: Column( ... ), ), Expanded( flex: 40, child: ListView.separated( ... ), Expanded( flex: 10, child: Row( ... ), ), ], ), 이런식으로 코드를 짜면 간단하게 화면 분할을 할 수 있다. flex 속성으로 Expanded의 비율을 정하여 크기를 정하면 된다.

class HomeScreen extends StatefulWidget { const HomeScreen({super.key}); @override State createState() => _HomeScreenState(); } class _HomeScreenState extends State { late SharedPreferences prefs; final List testList = ["확언하기", "감사하기", "명상하기"]; @override Widget build(BuildContext context) { return Scaffold( body: SafeArea( child: SingleChildScrollView( physics: const AlwaysScrollableScrollPhysic..

The instance member 'id' can't be accessed in an initializer. Try replacing the reference to the instance member with a different expressiondartimplicit_this_reference_in_initializer Flutter를 공부하던 중에 이와 같은 에러를 만나게 되었다. 이와 같은 에러가 난 코드를 일단 봐보자. class DetailScreen extends StatelessWidget { final String title, thumb, id; DetailScreen({ super.key, required this.title, required this.thumb, required th..

class HomeScreen extends StatefulWidget { const HomeScreen({super.key}); @override State createState() => _HomeScreenState(); } class _HomeScreenState extends State { List webtoons = []; bool isLoading = true; void waitForWebToons() async { print('start ApiService().getTodaysToons()'); webtoons = await ApiService().getTodaysToons(); print('end ApiService().getTodaysToons()'); isLoading = false; ..

final List entries = ['A', 'B', 'C']; final List colorCodes = [600, 500, 100]; Widget build(BuildContext context) { return ListView.separated( padding: const EdgeInsets.all(8), itemCount: entries.length, itemBuilder: (BuildContext context, int index) { return Container( height: 50, color: Colors.amber[colorCodes[index]], child: Center(child: Text('Entry ${entries[index]}')), ); }, separatorBuild..