Flutter: Simple slide up widget animation

Nhan Cao
3 min readJun 27, 2020

Step 1: Static UI

home_screen.dart

class HomeScreenBody extends StatelessWidget {
SlideUpController slideUpController = SlideUpController();

@override
Widget build(BuildContext context) {
return Stack(
alignment: Alignment.bottomCenter,
children: [
Container(
child: Column(
children: [
RaisedButton(
child: Text('Slide up widget'),
onPressed: () {

},
)
],
),
),
SlideUpWidget()
],
);
}
}

slideup_widget.dart

import 'package:flutter/material.dart';

class SlideUpWidget extends StatefulWidget {
final SlideUpController controller;

const SlideUpWidget({Key key, this.controller}) : super(key: key);

@override
_SlideUpWidgetState createState() => _SlideUpWidgetState();
}

class _SlideUpWidgetState extends State<SlideUpWidget> {
@override
Widget build(BuildContext context) {
return Container(
height: 200,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20))),
);
}
}

Step 2: Add action

--

--

No responses yet