1)
2) const
/colors.dart
import 'package:flutter/material.dart';
const rainbowColors = [
Colors.red,
Colors.orange,
Colors.yellow,
Colors.green,
Colors.blue,
Colors.indigo,
Colors.purple,
];
3) layout
/main_layout.dart
import 'package:flutter/material.dart';
class MainLayout extends StatelessWidget {
final String title;
final Widget body;
const MainLayout({
required this.title,
required this.body,
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: body,
);
}
}
4) screen
/home_screen.dart
import 'package:flutter/material.dart';
import 'package:scrollable_widgets/layout/main_layout.dart';
import 'package:scrollable_widgets/screen/grid_view_screen.dart';
import 'package:scrollable_widgets/screen/list_view_screen.dart';
import 'package:scrollable_widgets/screen/refresh_indicator_screen.dart';
import 'package:scrollable_widgets/screen/reorderable_list_view_screen.dart';
import 'package:scrollable_widgets/screen/scrollbar_screen.dart';
import 'package:scrollable_widgets/screen/single_child_scroll_view_screen.dart';
import 'custom_scroll_view_screen.dart';
class ScreenModel {
final WidgetBuilder builder;
final String name;
ScreenModel({
required this.builder,
required this.name,
});
}
class HomeScreen extends StatelessWidget {
final screens = [
ScreenModel(
builder: (_) => SingleChildScrollViewScreen(),
name: 'SingleChildScrollViewScreen',
),
ScreenModel(
builder: (_) => ListViewScreen(),
name: 'ListViewScreen',
),
ScreenModel(
builder: (_) => GridViewScreen(),
name: 'GridViewScreen',
),
ScreenModel(
builder: (_) => ReorderableListViewScreen(),
name: 'ReorderableListViewScreen',
),
ScreenModel(
builder: (_) => CustomScrollViewScreen(),
name: 'CustomScrollViewScreen',
),
ScreenModel(
builder: (_) => ScrollbarScreen(),
name: 'ScrollbarScreen',
),
ScreenModel(
builder: (_) => RefreshIndicatorScreen(),
name: 'RefreshIndicatorScreen',
),
];
HomeScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MainLayout(
title: 'Home',
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: screens
.map(
(e) => ElevatedButton(
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: e.builder,
),
);
},
child: Text(e.name),
),
)
.toList()),
),
),
);
}
}
/refresh_indicator_screen.dart
import 'package:flutter/material.dart';
import 'package:scrollable_widgets/const/colors.dart';
import 'package:scrollable_widgets/layout/main_layout.dart';
class RefreshIndicatorScreen extends StatelessWidget {
final List<int> numbers = List.generate(
100,
(index) => index,
);
RefreshIndicatorScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MainLayout(
title: 'RefreshIndicatorScreen',
body: RefreshIndicator(
onRefresh: () async {
await Future.delayed(Duration(seconds: 3));
},
child: ListView(
children: numbers
.map(
(e) => renderContainer(
color: rainbowColors[e % rainbowColors.length],
index: e,
),
)
.toList(),
),
),
);
}
Widget renderContainer({
required Color color,
required int index,
double? height,
}) {
print(index);
return Container(
height: height ?? 300,
color: color,
child: Center(
child: Text(
index.toString(),
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w700,
fontSize: 30.0,
),
),
),
);
}
}
'개발이 좋아서 > Flutter가 좋아서' 카테고리의 다른 글
[flutter] 미세먼지 앱_환경세팅 (0) | 2023.01.30 |
---|---|
[flutter] 미세먼지 앱_정부 API 승인 (0) | 2023.01.27 |
[flutter] Scrollable Widgets_Scrollbar (0) | 2023.01.27 |
[flutter] Scrollable Widgets_CustomScrollView (0) | 2023.01.27 |
[flutter] Scrollable Widgets_ReorderableListView (0) | 2023.01.26 |