Skip to content
Permalink
Browse files

add all sections

  • Loading branch information...
JalAzimi committed May 31, 2019
1 parent 60f6b76 commit 081fbfd68b23c33b5b37e8e7c1b9e6235520cf56
@@ -5,3 +5,15 @@ class SetColor {

SetColor(this.boxColor);
}

class SetSize {
final MyBoxSize boxSize;

SetSize(this.boxSize);
}

class SetShape {
final double borderRadius;

SetShape(this.borderRadius);
}
@@ -4,8 +4,13 @@ import 'package:flutter_redux/flutter_redux.dart';
import 'package:redux_logging/redux_logging.dart';
import 'package:sample_flutter_redux_app/models/models.dart';
import 'package:sample_flutter_redux_app/reducers/app_reducer.dart';
import 'package:sample_flutter_redux_app/color_box.dart';
import 'package:sample_flutter_redux_app/result_box.dart';
import 'package:sample_flutter_redux_app/color_controller.dart';
import 'package:sample_flutter_redux_app/color_box.dart';
import 'package:sample_flutter_redux_app/size_controller.dart';
import 'package:sample_flutter_redux_app/size_box.dart';
import 'package:sample_flutter_redux_app/shape_controller.dart';
import 'package:sample_flutter_redux_app/shape_box.dart';

void main() {
final initialState = AppState(
@@ -14,6 +19,13 @@ void main() {
green: 5.0,
blue: 5.0,
),
boxSize: MyBoxSize(
width: 5.0,
height: 5.0,
),
boxShape: MyBoxShape(
borderRadius: 5.0,
),
);

final store = Store<AppState>(
@@ -38,6 +50,7 @@ class MyApp extends StatelessWidget {
padding: EdgeInsets.all(20),
child: ListView(
children: <Widget>[
ResultBox(),
Container(
padding: EdgeInsets.only(top: 10),
child: Column(
@@ -47,17 +60,54 @@ class MyApp extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Padding(
padding: EdgeInsets.only(right: 20),
child: ColorController(),
),
),
child: Padding(
padding: EdgeInsets.only(right: 20),
child: ColorController(),
)),
ColorBox(),
],
),
],
),
),
Container(
padding: EdgeInsets.only(top: 10),
child: Column(
children: <Widget>[
Text('Size Controller'),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Padding(
padding: EdgeInsets.only(right: 20),
child: SizeController(),
)),
SizeBox(),
],
),
],
),
),
Container(
padding: EdgeInsets.only(top: 10),
child: Column(
children: <Widget>[
Text('Shape Controller'),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Padding(
padding: EdgeInsets.only(right: 20),
child: ShapeController(),
)),
ShapeBox(),
],
),
],
),
),
],
),
),
@@ -5,13 +5,19 @@ import 'package:sample_flutter_redux_app/models/models.dart';
@immutable
class AppState {
final MyBoxColor boxColor;
final MyBoxSize boxSize;
final MyBoxShape boxShape;

const AppState({
@required this.boxColor,
@required this.boxSize,
@required this.boxShape,
});

dynamic toJson() => {
'boxColor': boxColor,
'boxSize': boxSize,
'boxShape': boxShape,
};

@override
@@ -0,0 +1,20 @@
import 'dart:convert';
import 'package:meta/meta.dart';

@immutable
class MyBoxShape {
final double borderRadius;

const MyBoxShape({
@required this.borderRadius,
});

dynamic toJson() => {
'borderRadius': borderRadius,
};

@override
String toString() {
return 'MyBoxShape: ${JsonEncoder.withIndent(' ').convert(this)}';
}
}
@@ -0,0 +1,30 @@
import 'dart:convert';
import 'package:meta/meta.dart';

@immutable
class MyBoxSize {
final double width;
final double height;

const MyBoxSize({
@required this.width,
@required this.height,
});

MyBoxSize copyWith({double width, double height}) {
return MyBoxSize(
width: width ?? this.width,
height: height ?? this.height,
);
}

dynamic toJson() => {
'width': width,
'height': height,
};

@override
String toString() {
return 'MyBoxSize: ${JsonEncoder.withIndent(' ').convert(this)}';
}
}
@@ -1,2 +1,4 @@
export 'app_state.dart';
export 'box_color.dart';
export 'box_size.dart';
export 'box_shape.dart';
@@ -1,8 +1,12 @@
import 'package:sample_flutter_redux_app/models/models.dart';
import 'package:sample_flutter_redux_app/reducers/color_reducer.dart';
import 'package:sample_flutter_redux_app/reducers/size_reducer.dart';
import 'package:sample_flutter_redux_app/reducers/shape_reducer.dart';

AppState appReducer(AppState state, action) {
return AppState(
boxColor: colorReducer(state.boxColor, action),
boxSize: sizeReducer(state.boxSize, action),
boxShape: shapeReducer(state.boxShape, action),
);
}
@@ -0,0 +1,9 @@
import 'package:redux/redux.dart';
import 'package:sample_flutter_redux_app/actions/actions.dart';
import 'package:sample_flutter_redux_app/models/models.dart';

final shapeReducer = TypedReducer<MyBoxShape, SetShape>(_setShapeReducer);

MyBoxShape _setShapeReducer(MyBoxShape state, SetShape action) {
return MyBoxShape(borderRadius: action.borderRadius);
}
@@ -0,0 +1,9 @@
import 'package:redux/redux.dart';
import 'package:sample_flutter_redux_app/actions/actions.dart';
import 'package:sample_flutter_redux_app/models/models.dart';

final sizeReducer = TypedReducer<MyBoxSize, SetSize>(_setSizeReducer);

MyBoxSize _setSizeReducer(MyBoxSize state, SetSize action) {
return action.boxSize;
}
@@ -0,0 +1,52 @@
import 'package:flutter/material.dart';
import 'package:redux/redux.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:sample_flutter_redux_app/models/models.dart';
import 'package:sample_flutter_redux_app/selectors/selectors.dart';

class ResultBox extends StatelessWidget {
@override
Widget build(BuildContext context) {
return StoreConnector<AppState, _ViewModel>(
converter: (Store<AppState> store) => _ViewModel.fromStore(store),
builder: (BuildContext context, _ViewModel vm) {
return Container(
margin: EdgeInsets.symmetric(vertical: 64),
width: 100,
height: 100,
child: Center(
child: Container(
width: vm.boxSize.width * 10,
height: vm.boxSize.height * 10,
decoration: BoxDecoration(
color: vm.color,
borderRadius:
BorderRadius.circular(vm.boxShape.borderRadius * 5),
),
),
),
);
},
);
}
}

class _ViewModel {
final Color color;
final MyBoxSize boxSize;
final MyBoxShape boxShape;

_ViewModel({
@required this.color,
@required this.boxSize,
@required this.boxShape,
});

static _ViewModel fromStore(Store<AppState> store) {
return _ViewModel(
color: colorSelector(store.state.boxColor),
boxSize: store.state.boxSize,
boxShape: store.state.boxShape,
);
}
}
@@ -0,0 +1,29 @@
import 'package:flutter/material.dart';
import 'package:redux/redux.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:sample_flutter_redux_app/models/models.dart';

class ShapeBox extends StatelessWidget {
@override
Widget build(BuildContext context) {
return StoreConnector<AppState, MyBoxShape>(
converter: (Store<AppState> store) => store.state.boxShape,
builder: (BuildContext context, MyBoxShape boxShape) {
return Container(
width: 100,
height: 100,
child: Center(
child: Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: Colors.black45,
borderRadius:
BorderRadius.circular(boxShape.borderRadius * 5)),
),
),
);
},
);
}
}
@@ -0,0 +1,44 @@
import 'package:flutter/material.dart';
import 'package:redux/redux.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:sample_flutter_redux_app/models/models.dart';
import 'package:sample_flutter_redux_app/actions/actions.dart';
import 'package:sample_flutter_redux_app/my_slider.dart';

class ShapeController extends StatelessWidget {
@override
Widget build(BuildContext context) {
return StoreConnector(
converter: (Store<AppState> store) => _ViewModel.fromStore(store),
builder: (BuildContext context, _ViewModel vm) {
return Column(
children: <Widget>[
MySlider(
value: vm.boxShape.borderRadius,
label: 'O',
onChanged: (val) {
vm.onShapeChanged(val);
},
),
],
);
},
);
}
}

class _ViewModel {
final MyBoxShape boxShape;
final Function(double) onShapeChanged;

_ViewModel({@required this.boxShape, @required this.onShapeChanged});

static _ViewModel fromStore(Store<AppState> store) {
return _ViewModel(
boxShape: store.state.boxShape,
onShapeChanged: (double value) {
store.dispatch(SetShape(value));
},
);
}
}
@@ -0,0 +1,26 @@
import 'package:flutter/material.dart';
import 'package:redux/redux.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:sample_flutter_redux_app/models/models.dart';

class SizeBox extends StatelessWidget {
@override
Widget build(BuildContext context) {
return StoreConnector<AppState, MyBoxSize>(
converter: (Store<AppState> store) => store.state.boxSize,
builder: (BuildContext context, MyBoxSize boxSize) {
return Container(
width: 100,
height: 100,
child: Center(
child: Container(
width: boxSize.width * 10,
height: boxSize.height * 10,
color: Colors.black45,
),
),
);
},
);
}
}

0 comments on commit 081fbfd

Please sign in to comment.
You can’t perform that action at this time.